Solved

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

Posted on 2011-03-09
6
852 Views
Last Modified: 2013-11-11
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
Comment
Question by:freestate
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 35081997

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

Open in new window

0
 
LVL 13

Accepted Solution

by:
darren-w- earned 500 total points
ID: 35082004
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
 

Author Comment

by:freestate
ID: 35082109
Thanks for the reply Darren - I didn't know about .nextUntil

Will check that out.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:freestate
ID: 35082121
One quick question - how do I exclude the first element after the <h1> from the hide()? (For where there is an introductory paragraph.)
0
 

Author Comment

by:freestate
ID: 35082173
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
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 500 total points
ID: 35082283
exclude first one (line 10): $(this).next().nextUntil("h1").hide()
hide at start(before line 8):     $("h1").nextUntil("h1").hide();
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question