Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 901
  • Last Modified:

Jquery: hide all <p> following <h1> down to next <h1> tag

I am looking to use Jquery to collapse / hide some elements within a Wordpress blog post.

What I need is:

a series of <h1> and paragraph tags on a page.
<h1> tags to be clickable, and to toggle the <p> tags below it ONLY SO FAR AS THE NEXT <h1> tag

I know how to do this if all of the <p> tags were in a <div> directly below the <h1> but because it's not possible to put the <p> in a div, and there could be any number of <p> tags I'm getting stuck.

So, code will look like:

<h1>Title 1</h1>
<p>One</p>
<p>Two</p>
<p>Three</p>

<h1>Title 2</h1>
<p>One</p>

<h1>Title 3</h1>
<p>One</p>
<p>Two</p>

A tweaking of the attached code would be great
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Open in new window

0
freestate
Asked:
freestate
  • 3
  • 3
2 Solutions
 
darren-w-Commented:

        <script type="text/javascript">
            $(function(){
                $("h1").click(function(){
                    $(this).nextUntil("h1").hide();
                });
            });
        </script>

Open in new window

0
 
darren-w-Commented:
Tweaked code:

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
//$(document).ready(function() {
 $(function(){ //use shortform of above

//new bit
               $("h1").click(function(){
                    $(this).nextUntil("h1").hide();
                });


// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Open in new window

0
 
freestateAuthor Commented:
Thanks for the reply Darren - I didn't know about .nextUntil

Will check that out.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
freestateAuthor Commented:
One quick question - how do I exclude the first element after the <h1> from the hide()? (For where there is an introductory paragraph.)
0
 
freestateAuthor Commented:
And also - how do I hide all the elements on page load?

$('.toggle').hide(); is obviously doing it within the code, but I can't add classes to the paragraphs - it needs to be all paragraphs following h1 tags that are hidden.

Thanks
0
 
darren-w-Commented:
exclude first one (line 10): $(this).next().nextUntil("h1").hide()
hide at start(before line 8):     $("h1").nextUntil("h1").hide();
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now