jQuery toggle doesn't work

[Ayala]

Hi,

My jQuery doesn’t work.

I would like that if I click one question, the text would be visible. and if I click there again, it should be invisible again.
And the other thing, I would like that only one text of question would be visibly in one time.

https://codepen.io/Ayalann/pen/MExpjy

[Paulie_D]

You can’t animate a height to auto either in CSS or JS.

I’d suggest you use another reveal method.

[Ayala]

https://codepen.io/Ayalann/pen/MExpjy

I changed the code.

It works only the height is “auto” as default, but I would like it “0”.

The other thing, I would like that if I click one of question, then the other closes.

[Paulie_D]

You’need to include a function to select all the .question elements that are not $this and close the child elements.

https://stackoverflow.com/questions/437958/jquery-exclude-this-from-selector

[Ayala]

Actually I have no idea how it works.
There is no height: 0 in the code, but it does close! How?

[Shikkediel]

Never mind, there seems to be more to the question…

[Ayala]

I am sorry, in meantime I have changed the code. :)
I am almost there.
Now my main problem is that the “$(this).next()” doesn’t work.
I want to reach the div “.more” after the div “.question”.

[bearhead]

Hi Ayala, is this the functionality you are looking for?
https://codepen.io/kvana/pen/JrzOzE

I made the .more divs children of their respective .question divs (I think it simplifies the js) .

Also, if you’re using jquery you need to make sure that the library is linked. In code pen you can do this by opening the js settings and selecting jquery under add external javascript.

[Shikkediel]

Edit – didn’t see bearhead’s post (looks more straightforward)…

And I messed something up meanwhile anyway. :-)

[Ayala]

Almost.
I would like to close both.

[bearhead]

I’ve updated my pen to allow both to be closed at the same time.

[Ayala]

Thank you!
It is perfect! :)

[Author]

Posts