CODEWITHSUNDEEP
jqueryfunctiontoggle
user1288817
user1288817

Reputation:

jQuery toggle on different elements without creating a new function for each id element

Is there a way of making a jQuery toggle work on different elements on the same page without the need of having one function for each of the id elements.

This is what I have so far.

jQuery:

//Toggle-->
$('#clickme_info_1').click(function() { 
$( '.toggle_info_1' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

$('#clickme_info_2').click(function() { 
    $( '.toggle_info_2' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

HTML:

<div id="testSlider04" class="flexslider">
<ul class="slides">
    <li>
        <div id="clickme_info_1">+</div>
        <div class="toggle_info_1">Info 1 shows</div>
        Slide 1
    </li>
    <li>
        <div id="clickme_info_2">+</div>
        <div class="toggle_info_2">Info 2 shows</div>
        Slide 2
    </li>
</ul>
</div>

You can see it working in here http://jsfiddle.net/RaulMv/5FsPJ/

Upvotes: 0

Views: 358

Answers (3)

johnferrie
johnferrie

Reputation: 242

Add a class to the + element and on the animate add that class to the click function and on the animate change the toggle to $(this).next()

$('.yourclassname').click(function() { 
    $( this ).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

Here is a working example: http://jsfiddle.net/5FsPJ/3/

Upvotes: 2

Hushme
Hushme

Reputation: 3144

you should use class on div

Demo

//Toggle-->
$('.clickme_info_1').click(function() { 
    $( this ).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});


//FlexSlider-->
$(document).ready(function () {
    $('#testSlider04').flexslider({
        animation: "slide",
        animationLoop: true,
        slideshow: false,
        slideshowSpeed: 7000,
        animationSpeed: 600,
        initDelay: 0,
        randomize: false,
    });
});

Upvotes: 0

j08691
j08691

Reputation: 207901

Try:

$('#testSlider04 li > div').click(function() { 
    $(this).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

jsFiddle example

Upvotes: 0

Related Questions