37462

jQuery Show/Hide nested divs

Question:

I have awkward problem I cannot resolve.

I have a nested divs, which I want to show / hide when user clicks on a link. All divs at once.

I cannot assign ID's to my divs, so I will need to do it wiht classes.

<a href="#" id="showhide">Show more</a> <div class="more"> <div class="more1"> <h2>Some title</h2>

Some text

</div> <div class="more2"> <h2>Some title</h2>

Some text

</div> <div class="more3"> <h2>Some title</h2>

Some text

</div> </div>​

Here is the fiddle to my html structure. <a href="http://jsfiddle.net/56jdL/1/" rel="nofollow">http://jsfiddle.net/56jdL/1/</a>

Thanks!

Answer1:

You can use first hide the div, using css:

.more { display: none }

or jQuery:

$('.more').hide()

And then use toggle method:

$(function() { // $('.more').hide() $('#showhide').click(function(e){ e.preventDefault(); $('.more').toggle() }) })

<a href="http://jsfiddle.net/J2YgE/" rel="nofollow">http://jsfiddle.net/J2YgE/</a>

Answer2:

Try this :

$("#showhide").on('click', function(){ $(".more").children("div").slideToggle(); return false; });

<strong><a href="http://jsfiddle.net/56jdL/6/" rel="nofollow">DEMO</a></strong>

<h2>EDIT</h2>

To selectively toggle divs, give then a class by which they can be selected.

<div class="hideMe"> ... </div>

Then, the following jQuery will only act on those divs :

$("#showhide").on('click', function(){ $(".more").children("div.hideMe").slideToggle(); return false; });

<strong><a href="http://jsfiddle.net/56jdL/9/" rel="nofollow">DEMO</a></strong>

<h2>EDIT 2</h2>

Here's a version that will work on your more complete code :

$(".showhide").on('click', function() { $(this).closest(".vrsticaoglas").find(".more").children("div").slideToggle(); return false; });

<strong><a href="http://jsfiddle.net/5uZ6X/5/" rel="nofollow">DEMO</a></strong>

Recommend

  • Sort Array Index by SubArray Value
  • Set up cookie for the component in react.js
  • How to subtract a date from current date in AngularJS
  • show div on form submit with no redirect
  • “NAs are not allowed in subscripted assignments”
  • Contact form problem - I do receive messages, but no contents (blank page)
  • IE11 textarea loses focus if another textarea is disabled
  • HighCharts - Show tooltip on column where value is 0 or null
  • How can I make this modal persistent?
  • FileReader+canvas image loading problem
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Insert into database using onclick function
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Problems to linebreak with an int in JLabel
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • How to add date and time under each post in guestbook in google app engine
  • Fill an image in a square container while keeping aspect ratio
  • Join two tables and save into third-sql
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Symfony2: How to get request parameter
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • How to get icons for entities from eclipse?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Java static initializers and reflection
  • How to stop GridView from loading again when I press back button?
  • unknown Exception android
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?