jquery hide/show element

jQuery(document).ready(function() {
								  jQuery('#p').hide();
								    jQuery('h2').click(function() {
	jQuery('h2+p').slideToggle(400);
	return false;
  });
});

this is my code. any help?

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.

https://api.jquery.com/category/selectors/

Good luck!

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

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); } );
});

Hi curtiss,
Thanks alot, but it doesn t work
arfffff

That’s strange, because it works just fine in a test I just created. Are you sure there’s no other javascript that’s conflicting with this?

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!

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?

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

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.

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

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?

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