show/hide content on click with js

[Funkaholik]

Hey guys .. listen
i saw a lot of methods on how to HIDE/show content on click but
i haven’t found a method how to SHOW/hide content on click((
so obvious thing and no info about it, so i’m moving to js slowly))

say you have a clickable menu and some content is hidden by default
you click a bubble to show content .. so what i want is when you click on any other bubble it hide all other content and show only the one that is attached to a particular bubble.
also how to add some transition/animation effects to that click?

the only way for now that i’ve figured is to toggle classes but that’s kinda stooped and there should be more proper way to do that i believe.

[Shikkediel]

Have a look at this…

codepen.io/anon/pen/EWaoRM

Still toggles classes though, maybe using hide() and show() could be more convenient.

how to add some transition/animation effects to that click?

What exactly should the effect look like then?

[Funkaholik]

wheeeeee it’s working!!))

but it searches for class show/hide only in nested elements
what if i want to control any other element with the same bubble?

and about animations you see it slowly fades in but don’t wants to fade out.
here is an example

[Shikkediel]

searches for class show/hide only in nested elements

Not exactly true, only the hide part… it then adds any element with the show class. So even if it is outside the current parent.

what if i want to control any other element with the same bubble?

In general jQuery’s ace with this but you’d have to be a bit more specific.

For the fading out, it seems key to not make use of display: none.

[Funkaholik]

well you see in the example there is a div
how to assign any of these buttons to control a div?

and display: none; i use to hide a content completly, not just make it transparent
off course i can change z-index or hide it on the outside of the window but display: none; is the best way i assume

[Shikkediel]

You could add it with a separate class when the animation has ended:

codepen.io/anon/pen/JWoZLR

Another good option is visibility: hidden by the way. It is then not clickable but still takes up the physical space.

how to assign any of these buttons to control a div?

What’s the relation between them? You’ll see it’s already responding in one way because it has the show class.

Edit – it’s not very smooth in all cases but at this point it might get more straightforward to do the animations with jQuery as well. Switching classes and event listeners only go so far.

[Funkaholik]

here is our first pen
class .menu_blocks there searching for elements with class .hide and change them to .show

now let’s then make a small reshuffle)

here is a new pen
how to make a same toggling effect as the first one but using only id’s or at least without using a same class as a selector ???
so i can assign to a specific id a specific element within the page and make them relate to each other somehow (meaning id’s)
so when one id is on (content it relates to is visible) other id’s off (other content hidden)

[Shikkediel]

Here’s an example based on the order they’re in (first button correlates to first div and so on):

codepen.io/anon/pen/pevOrp

But it’s JS so there would be many ways, without any classes even:

codepen.io/anon/pen/zZxJPM

Semantically they’re buttons by the way…

[Funkaholik]

Shikkediel, you literally made my day.
thanx a lot!

maaan i gotta learn js=((

P.S. you know what would be even cooler?))
if you would make them divs hidden if click to a free area
(for both examples cause i’m not sure which one is easier to handle in future)

[Shikkediel]

No problem. :-)

Here’s the basic approach you could take for what you mentioned:

$('button, div').click(function(e) {

  e.stopPropagation();
});

$(window).click(function() {

  $('div').removeClass('active');
});

It basically hides the divs on any click, making sure those that occur on the buttons or divs aren’t “heard” (they don’t bubble up). Added to both earlier pens.

maaan i gotta learn js

No doubt you will, it’s definitely worth it.

[Funkaholik]

i’m actually came up with a new idea already)
Can you add a transition for a content of a button?
Say you click a button and for example 1 changes to X (✖)
you click 2, X turns 1 again and 2 turns into X .. and if you click X all divs become hidden
and X turns back to its original value (1, 2 ,3 etc) .. can you do that ^_^?

and about js i can’t find a good break in online crash course
i’v read a bit here and there but its all boring
i like to learn at practice but with js unlike html/css it’s a bit hard to do when you’re not familar with syntax
so i think i gotta take courses or so .. or i’ll be bugging you here forever=))

[Shikkediel]

Let me see if I can figure out what you mean exactly and put something together…

I didn’t really do any course myself, just jumped into it and fiddled around until I understood the basics. Usually motivated by having an idea of what I wanted to create (much like you when I look at what you’ve been posting), followed by a bunch of googling plus trial and error. Might not be the “right” way but in my experience it’s the quickest path to learn stuff because you’re busy with what interested you to begin with.

Not that I’d want to dissuade anyone from taking a good course of course…

[Shikkediel]

Check it out:

codepen.io/anon/pen/pevXoz

If I understood correctly…

Using the order of the elements was definitely the way to go on this one.

[Funkaholik]

yeah but what if i have say not numbers but names for buttons like so

[Shikkediel]

That’s a minor adjustment, “saving” the text in an array. But still using the order of the elements:

codepen.io/anon/pen/gmbVGP

[Author]

Posts