Title: jquery hide/show element
Last modified: August 19, 2016

---

# jquery hide/show element

 *  Resolved [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/)
 * Hi,
    I am using a bit of jquery to show and hide content if title h2 is clicked.
   The problme is as there are many title h2 (within a loop) when i click on only
   title h2 it shows the content of all the h2 content. my code is
 *     ```
       jQuery('a#slick-slidetoggle').click(function() {
       	jQuery('#toggle-search').slideToggle(400);
       	return false;
         });
       });
       ```
   
 * I would appreciate any help as i don t know how to fix it.
    Cannot give an unique
   id to the tile h2 because of belomging to the loop i ll get class..
 * One idea?
    Even if not with jquery ,i ll take it:)

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880554)
 *     ```
       jQuery(document).ready(function() {
       								  jQuery('#p').hide();
       								    jQuery('h2').click(function() {
       	jQuery('h2+p').slideToggle(400);
       	return false;
         });
       });
       ```
   
 * this is my code. any help?
 *  [racer x](https://wordpress.org/support/users/racer-x-1/)
 * (@racer-x-1)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880567)
 * First of all, if these are results for many posts you shouldn’t be using any 
   ID’s. Use class selectors. ID’s can only be used once on a page.
 * Is this #p actually the id name? (in other words id=”p”?)
 * Secondly, you need to use the selector “this”. Your code is currently targeting
   any a#slick-slidetoggle clicked open to show any/all p content instead of only
   the child of the clicked parent.
 * Try changing the selector to:
 *     ```
       $("p", this).slideToggle(400);
       or
       $(this).find('p').slideToggle(400);
       ```
   
 * Assuming you want only the p under the clicked h2 to open.
 * Without seeing the template code I cannot be certain this is the proper target
   solution but I hope you get the idea how selectors work with jQuery.
 * [http://api.jquery.com/category/selectors/](http://api.jquery.com/category/selectors/)
 * Good luck!
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880580)
 * Hi racer,
    yeap sorry in my first post i didn t post the right code. so p is 
   a paragraf, and h2 in an html h2. i could use a class but this is the same probleme,
   if i click on one h2 all the paragraph are open.
 *     ```
       <h2  ><?php echo $page->post_title ?></h2>
       		<?php echo $content ?>
       ```
   
 * And the “p” is inside the content
    You code don t work, Anyway thanks for your
   help
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880617)
 * Try this and see if it works for you. This should hide all HTML elements that
   follow any h2 elements (within the same parent container). Then, when a user 
   clicks on one of the h2 elements, it will show/hide all HTML elements that are
   found between the clicked h2 element and the next h2 element in that parent container.
 *     ```
       jQuery( function( $ ) {
       	$('h2').nextUntil('h2').hide();
       	$('h2').click( function() { $(this).nextUntil('h2').toggle(400); } );
       });
       ```
   
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880629)
 * Hi curtiss,
    Thanks alot, but it doesn t work arfffff
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880634)
 * That’s strange, because it works just fine in [a test I just created](http://pastebin.com/h1fZ5Ncd).
   Are you sure there’s no other javascript that’s conflicting with this?
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880652)
 * Hummm
    i dont understand … I don t have other javascript code, i disabled plugins
   and no way i have jquery well loaded. It doesn t hide the paragraphs between 
   h2 so i decided to do that via css display:none I try your code again without
   the line to hide the elements and no luck!
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880655)
 * Try removing the `display:none` from your CSS and then try the javascript code
   I provided. I’m not sure if jQuery’s `.hide()` and `.toggle()` methods handle`
   display:none` quite the way they should.
 * If that doesn’t work, can you post the entire loop from your theme, so we can
   see exactly how the content is being populated and output?
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880660)
 * Ok,
    i followed your instructions but no win:) here my code in page.php:`<div
   id=”col_txt”> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?
   >
 *  <?php if ( is_front_page() ) { ?>
    <h2><?php the_title(); ?></h2> <?php } else{?
   > <h1><?php the_title(); ?></h1> <?php } ?>
 *  <?php the_content(); ?>
 * <?php endwhile; ?>
 * <?php
    if ( is_page(‘4’)){ ?>
 * <?php
    $pages = get_pages(‘child_of=’.$post->ID.’&sort_column=post_date&sort_order
   =desc’); $count = 0; foreach($pages as $page) { $content = $page->post_content;
   if(!$content) continue; if($count >= 4) break; $count++; $content = apply_filters(‘
   the_content’, $content); ?> <div id=”same”><h2 ><?php echo $page->post_title ?
   ></h2> <?php echo $content ?></div> <?php }} ?>` Thanks i appreciate your help,
   always cool
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880672)
 * You should probably edit your post to remove the code, and then paste the code
   into a pastebin (forum rules).
 * I still can’t figure out what might be causing the issue. I’ve tested some code
   that should look basically the same as your result, and it’s working for me. 
   Do you have a link to the page that you’re using for testing purposes?
 * Regardless, there are a few validity issues that you may want to fix (though 
   they shouldn’t be having an effect on the situation).
    1. An ID has to be unique on a page in order for it to be valid. You are assigning
       the ID of “same” to all four the pages that you’re showing, so that might be
       messing something up. Try changing `id="same"` to `class="same"` or `id="same_
       <?php echo $count ?>"`
    2. There is a space before the closing bracket of the `<h2>` element.
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880689)
 * An ID has to be unique on a page in order for it to be valid. You are assigning
   the ID of “same” to all four the pages that you’re showing, so that might be 
   messing something up. Try changing id=”same” to class=”same” or id=”same_<?php
   echo $count ?>”
    There is a space before the closing bracket of the <h2> element.
 * Yeap you are right thanks!
    Still not working:( I am working in local so cannot
   give you a link. But i have this alert with mozilla: Error : $(“h2”).nextUntil
   is not a function
 *  [Curtiss Grymala](https://wordpress.org/support/users/cgrymala/)
 * (@cgrymala)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880693)
 * That FF error brings up three possibilities:
    1. jQuery is not actually loading for some reason
    2. The jQuery alias ($) is not working for some reason
    3. The version of jQuery you’re using is older than v1.4 (which is when the `nextUntil()`
       function was added)
 * To rule out number 2, try this code instead (just in case the jQuery alias is
   not working):
 *     ```
       jQuery( function() {
       	jQuery('h2').nextUntil('h2').hide();
       	jQuery('h2').click( function() { $(this).nextUntil('h2').toggle(400); } );
       });
       ```
   
 * Are you using the latest version of WordPress? Are you, for some reason, loading
   in a different version of jQuery than WordPress includes by default?
 *  Thread Starter [davidandre](https://wordpress.org/support/users/davidandre/)
 * (@davidandre)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880699)
 * Yeap you are right!
    I was with the version 1.3.2 i ve just changeg to the 1.4
   and it work just fined! Thanks alot ! you saved my day. cheers

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘jquery hide/show element’ is closed to new replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 13 replies
 * 3 participants
 * Last reply from: [davidandre](https://wordpress.org/support/users/davidandre/)
 * Last activity: [15 years, 2 months ago](https://wordpress.org/support/topic/jquery-hideshow-element/#post-1880699)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics