Show/hide a component

Code Library
1

Show or hide a component based on a user input or a screen size

We may want to reveal something when a button is pressed or remove it from a layout when the screen size is small and it would take up too much space.

There are a number of ways to show and hide an element including fading it out and moving it off screen. Below we’ll discuss a few more ways.

Showing or hiding a component based on screen size

For most components it is actually possible to do this without code. To do this, select the component and open its Appearance Settings. There you can adjust the component’s visibility based on the screen size you’ve selected (normally at the bottom of the Appearance Settings).

You can achieve the same thing in code using CSS. If you have the class or ID of an element you want to edit (see here for how to add or find a class or ID) you can then:

To hide a component on mobile devices:

CSS

@media only screen and (max-height: 640px) {
  [data-widget-package="com.fliplet.container"] {
    display: none;
  }
}

To hide a component on tablet devices:

CSS

@media only screen and (min-height: 640px) {
  [data-widget-package="com.fliplet.container"] {
    display: none;
  }
}

To hide a component on desktop devices:

CSS

@media only screen and (min-height: 1024px) {
  [data-widget-package="com.fliplet.container"] {
    display: none;
  }
}

Showing or hiding a component based on a button click

HTML

<fl-image cid="2851104" id="hidden-image" class="hidden"></fl-image>
<fl-button class="my-button" cid="12345"><fl-button>

In the JavaScript code, we need to set up a function that will listen for a click and run our custom code to show or hide a component. The following code uses a library called jQuery that comes pre-installed in Fliplet. The function is called when the component with the ‘my-button’ class is clicked. Note that we need to add a ‘.’ to indicate that ‘my-button’ is a class name.

JavaScript

$('.my-button').on('click', function () {
  // Adds or removes the class 'hidden'
  $('.hidden-image').toggleClass('hidden');
});

This function will toggle the class ‘hidden’ from the image component.