jQuery slide toggle

Question

rubai 0 Newbie Poster

12 Years Ago

I have a simple jQuery code for toggle. I want to apply it in multiple <div>s as more I need.

here is the code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle(500);
  });
});
</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle(500);
  });
});
</script>

<style type="text/css"> 
#box1
{ margin:10px;
  height:auto;
}
#panel1,#flip1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel1
{
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>

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

</body>
</html>

I want same box for multiple times. For example if I add another panel to apply sliding drop down effect what would the way to do that? I need more panels.

here is the jsbin link: http://jsbin.com/usafir/1

javascript jquery

Edited 12 Years Ago by rubai because: edit

4 Contributors
3 Replies
500 Views
3 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by elneco

elneco 0 Newbie Poster

12 Years Ago

dont use .live() it is deprecated. try pritaeas' example

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 1 · 2012-10-23T13:01:56+00:00

Use a class, instead of an id. You can use this code:

$(".flip").click(function() {
    $(this).next().slideToggle(500);
});

With this HTML:

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

Bachu 45 Newbie Poster · Answer 2 · 2012-10-23T13:14:22+00:00

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle-Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css"> 
#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#box1
{ margin:10px;
  height:auto;
}

#panel1,#panel2,#panel3
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
padding:50px;
display:none;
}
</style>
</head>

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

<div id="box1" >
<div id="flip" rel="2" >Click to slide the panel down or up</div>
<div id="panel2">Hello world!</div>
</div>
<div id="box1">
<div id="flip" rel="3" >Click to slide the panel down or up</div>
<div id="panel3">Hello world!</div>
</div>

</body>
<script type="text/javascript"> 

$(document).ready(function(){
  $("#flip").live('click', function(){
      var val=$(this).attr('rel');
    $("#panel"+val).slideToggle(500);
  });
});
</script>
</html>