How to use interactions to hide and show (toggle) a div?

How To
1

Hi, I have an icon that I want to use to toggle a divs visiblity.
Initially the div is hidden (display: none), once the icon is clicked, the div should appear.
And when the icon is clicked again, the div should be hidden again.

The icon is located outside the div.

I tried using two click interactions on the icon to show and hide the element, targeting the div with a CSS selector. It works to hide it, or to show it, but not to toggle it.

image
image289Ă—700 17.8 KB

How can I make this work?

Thanks a lot!

2

image
image1915Ă—975 54.9 KB

interaction setup + custom css

.hiding{
display:none;
}
2 Likes
3

Thank you @sinanisler , I appreciate it.

But how can I make it initially hidden? I’ve added %root% {display: none;} but then it doesn’t toggle anymore.

Thanks!

4

ooooh than forget about the hiding lets make .nothiding :smiley:

here almost the same thing

image
image1906Ă—896 44.3 KB

and button

image
image1904Ă—959 51.1 KB

2 Likes
5

Thank you very much, this also helped me understand how it works for future instances!

6

Hello,
pardon my ignorance but I didn’t understand your solution very well !
I want a hidden element at start to be shown after clicking a button

7

So wonderfully simple :slight_smile: Thanks!

8

I replicated this but can’t seem to get this to work. Seems like an issue with display: none, cause if it starts out visible then it does work but if it starts with display:none it does not.

9

I had the same problem, then I realized that the css on the element overwrites the css on the class.

What I did was remove the display:none on the element, then create a class called “Hidden” with the display:none, and set the element to that class initially. That means that when you toggle the class, the element will become visible.

10

How do you initially set the class to “hidden”?

I can get it to hide when the element is showing first. In the CSS under the element to be hidden as such:

.nav-unhidden {
display: block; }

.nav-hidden {
display: none }

The toggle/button is Click | Toggle Attribute | .nav-unhidden > target CSS selector class

But can’t get it too initially be invisible. I’m assuming the toggle will have to change if I figure this out, because right now it is toggling the .nav-unhidden, and will need to change to .nav-hidden.

11

I used a single class (ingeniously called .hidden :wink:) with the custom CSS “display:none”. Then I set it on the element I wanted to toggle.

Here’s the interaction:

bild
bild971Ă—1593 40.4 KB

That’s the simple version. I also created a version that fades it in with animations, but that required a bit more work. First I had to show it, then the animation, then set a key in session storage to show that it was visible so it wouldn’t be possible to click twice and get wonky results.

Then I did the reverse when hiding the element: fade out + hide + remove key from browser storage.

Lastly, I had to remove the key on page load, otherwise it would think that the element was visible if you showed it and then reloaded the page.

I probably messed it up and there’s a simpler solution, but this is what worked for me :slight_smile: