CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggleinsertafter
user1049944
user1049944

Reputation:

insertAfter() Breaking Click Event

I have the following markup that consists of 3 chunks of content, each containing a heading and some content:

<div class="feed-panels-expanding">
    <div class="feed">

        <section>

            <h2><a href="#">Heading One</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Two</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Three</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

    </div>
</div>

I want it so that clicking each heading does a expands / closes the content beneath.

I'm trying to get it so that the jQuery script takes care of hiding all but the first paragraph. In order to do this, it takes the first paragraph and moves it outside of .content. It then hides .content

// feed-panels-expanding
$('.feed-panels-expanding section').each(function() {

    $(this).find('h2 a').click(function() {
        $(this).parent().next('.content').slideToggle(250);
        return false;
    });

    $(this).find('.content p:first').insertAfter($(this).find('h2'));
    $(this).find('.content').hide();

});

However there's something the script really doesn't like about me moving the first p element in each content block. If I remove that line, the script works fine and all of the panels expand / contract when the relevant heading is clicked.

But with that line of code in there, the script does nothing. I can get an alert statement to pop up when I click the headings, but it just ignores the .content elements

Upvotes: 0

Views: 86

Answers (5)

SM Ahmed
SM Ahmed

Reputation: 128

I think what you want is an accordion.

More here: http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

Upvotes: -1

Anis Boukhris
Anis Boukhris

Reputation: 421

i think that your problem is the selection of the content check the snippet

you did $(this).parent() witch is the h2 tag not the .content and use find better to find the element .content

$(this).parent().parent().find('.content').slideToggle(250);


// feed-panels-expanding
$('.feed-panels-expanding section').each(function() {

    $(this).find('h2 a').click(function() {
      //you did $(this).parent() witch is the h2 tag not the scetion and use find better
        $(this).parent().parent().find('.content').slideToggle(250);
        return false;
    });

    $(this).find('.content p:first').insertAfter($(this).find('h2'));
    $(this).find('.content').hide();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed-panels-expanding">
    <div class="feed">

        <section>

            <h2><a href="#">Heading One</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Two</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Three</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

    </div>
</div>

Upvotes: 0

Tim McClure
Tim McClure

Reputation: 1192

Here is a working jsfiddle.

All content divs are hidden initially besides the first content div. No need to remove it and place it elsewhere - CSS can find it by looking for the first section element and then finding the .content div within that.

As for the jQuery, the click event looks for the section parent element, then searches for the .content div within that to toggle the display.

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93631

next only looks at the single following sibling element, then applies the filter.

Simple fix for now. Use nextAll with your .content filter:

$(this).find('h2 a').click(function() {
    $(this).parent().nextAll('.content').slideToggle(250);
    return false;
});

nextAll only looks at subsequent elements, so is more efficient than siblings when you know the elements follow afterwards.

Upvotes: 0

epascarello
epascarello

Reputation: 207557

next() looks for the next element after the one you selected. And it is no longer the content element. The next element is the paragraph you just inserted.

$(this).parent().siblings('.content').slideToggle(250);

Upvotes: 3

Related Questions