Как я могу использовать jquery slide toggle с классом?

Я использовал следующий код от http://w3schools.com. Но в этом я могу использовать только один раз. Я хочу использовать его более одного раза, потому что хочу создать панель «FAQ» в HTML , но это от ID, и я могу использовать его только один раз.Как я могу использовать jquery slide toggle с классом?

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
}); 
</script> 

<style type="text/css"> 
#panel,#flip 
{ 
padding:5px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#panel 
{ 
padding:50px; 
display:none; 
} 
</style> 
</head> 
<body> 

<div id="flip">Click to slide the panel down or up</div> 
<div id="panel">Hello world!</div> 

</body> 
</html>

источник

2013-11-01 Vikash Shandilya

Используйте имя класса вместо идентификаторов –

demo

сценарий:

$(function(){ 
    $('a.toggle').click(function(){ 
     $('.myContent').stop().slideToggle(500); 
     return false; 
    }); 

});

HTML

<a href="#" style="background-color: #99CCFF; padding: 5px 10px;" class="toggle">CLICK</a> 

<div> 
    <div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery. 
    </div> 

    <div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery. 
    </div> 
</div>

источник

2013-11-01 07:49:11 Ashish

Изменение id к class, а затем нас е класс селекторы в CSS и JQuery

<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div> 
<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div> 
<div class="flip">Click to slide the panel down or up</div> 
<div class="panel">Hello world!</div>

CSS

.panel, .flip { 
    padding:5px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
} 
.panel { 
    padding:50px; 
    display:none; 
}

затем

$(document).ready(function() { 
    $(".flip").click(function() { 
     $(this).next('.panel').slideToggle("slow"); 
    }); 
});

Демо: Fiddle

источник

2013-11-01 07:49:30

Спасибо Arun P Johny.I использовали он и работает отлично для меня. –

Как я могу использовать jquery slide toggle с классом?

ответ

Смежные вопросы