CODEWITHSUNDEEP
javascriptjquery
user0129e021939232
user0129e021939232

Reputation: 6355

jquery slidetoggle hide previous element

I'm working on a slideToggle function on click, I want to hide the previous element that was clicked when a new one is clicked, I've used this same set of code previously and its worked however it's no longer working now and I'm stumped at why its no longer works:

My code is as below or view a jsfiddle

js/js.js

$('.togglesources').hide();
$('.captionsource').on('click', function () {
            $(this).next('.togglesources').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
                      return false;
        });

index.html

<div class="mostpopular">
             <h4>Nokia:</h4>
             <h5>3100</h5>
            <p>Most popular mobile phone of the year</p>
                <div class="sources">
                    <p class="captionsource">Click to toggle source</p>
                        <div class="togglesources">
                            <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones#2003">Wikipedia (Data Source)</a></p>
                            <p class="source"><a href="http://gsmsolution24.blogspot.co.uk/2012/01/nokia-3100-3120-6100-hardware-repair.html" target="_blank">GSM Solution (Image Source)</a></p>
                        </div><!-- End Toggle Sources -->
                </div><!-- End Sources -->
        </div>
        <!-- END MOST POP -->
        <div class="mostpopular">

             <h4>Lord of the Rings:</h4>
             <h5>Return of the King</h5>
                <p>Highest Grossing Film</p>
                <div class="sources">
                    <p class="captionsource">Click to toggle source</p>
                    <div class="togglesources">
                         <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_highest-grossing_films#High-grossing_films_by_year" target="_blank">Wikipedia</a></p>
                     <p class="source"><a href="http://www.imdb.com/title/tt0167260/" target="_blank">IMDB (Image Source)</a></p>
                        </div> <!-- End Toggle Sources -->
                </div> <!-- End Sources -->

        </div>

would appreciate some help in regards to this.

Why aren't the other '.togglesources' divs closing when I open a new one?

Upvotes: 0

Views: 876

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Try this:

    $('.togglesources').hide();
    $('.captionsource').on('click', function () {
    $(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
            $(this).next('.togglesources').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
    return false;
        });

Working Fiddle

Upvotes: 1

Related Questions