CODEWITHSUNDEEP
javascriptjqueryhtml
Donny van V
Donny van V

Reputation: 961

jQuery -> toggle function

I have a list with events. I use a foreach for the array to retrieve the data. How my list looks like:

<article class="club-list-club">
            <h2 class="club-list-title">
                <a href="'.url('clubs/'.$club->getSlug()).'">'.$club->getClubnaam().'</a>
            </h2>
            <h2 class="club-list-location">
                '.$club->getWoonplaats().'
            </h2>
            <h2 class="club-list-open-info">
                Openingstijden
            </h2>

            <h2 class="club-list-big-info">
                link2page
            </h2>
            <h2 class="club-list-small-info">
                <span class="club-list-show-small-info">Show</span>
            </h2>
            <div class="more-info hide">
                Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
                andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
                openingstijden en alle andere belangrijke info.
            </div>
        </article>';

When the SPAN .club-list-show-small-info is clicked, i want the first div.more-info to toggle with fade or slide. What am i doing wrong in my code below:

<script type="text/javascript">
$(document).ready(function(){
    $('.club-list-show-small-info').click(function(){
        $(this).next('div').slideToggle('.hide');
    });
});
</script>

Upvotes: 0

Views: 59

Answers (2)

Felix
Felix

Reputation: 38102

It should be:

$('.club-list-show-small-info').click(function(){
    $(this).parent().next().slideToggle();
});

Since the info you want to show and hide is the next() sibling of .club-list-small-info which is the parent() of your .club-list-show-small-info span

Demo

If you want to have fade effect, you can use fadeToggle():

$('.club-list-show-small-info').click(function(){
    $(this).parent().next().fadeToggle();
});

Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The click event is bound to the span element, the div is not its next sibling element, the div is the next sibling of the spans parent h2 element. So

$(document).ready(function () {
    $('.club-list-show-small-info').click(function () {
        $(this).parent().next('div').slideToggle();
    });
});

Demo: Fiddle

Upvotes: 2

Related Questions