Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Simple Collapsible Div?

I am looking for the proper, simple, small code to do the following things:

  • Click on Element with Class Applied to it.

  • DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)

  • DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)

I have created a jsFiddle here: http://jsfiddle.net/Q4PUw/1/

So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.

I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.

Thank you all for the help and I hope that I may be able to answer this same question for plenty of other people...

Note: I know very little JavaScript and or even jQuery.

like image 863
Aaron Brewer Avatar asked Dec 13 '11 19:12

Aaron Brewer


People also ask

How do you make a div collapse?

The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.

What is the jQuery code for collapsible content?

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Directly inside this container, add any header (H1-H6) or legend element.

How can I expand and collapse a div using Javascript?

In jQuery , the show() and hide() method are used to show or hide any element in HTML. We can use these functions to collapse or expand the div tag as shown below. Copy $('.

How do you make a Javascript collapsible?

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.


1 Answers

$('.expand-one').click(function(){     $('.content-one').slideToggle('slow'); }); 

Demo: http://jsfiddle.net/Q4PUw/2/

like image 113
AlienWebguy Avatar answered Oct 07 '22 20:10

AlienWebguy