How to create a php (jquery) slide toogle information directory
I am trying to make a directory which contains information in a div, some of this information is going to be hidden and some of it is going to be displayed. When you click the click me button for each directory it displays the hidden information as shown with the code example below,
Note: The information and divs will be generated by php coming from a database!
Html
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type = "text/javascript" src ="jquery.js"><开发者_开发问答;/script>
<script type = "text/javascript">
$(document).ready(function() {
$(".toogle").click(function() {
$(".hiddenInfo").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="roundtest">
<p>
Hello World
<div class="hiddenInfo">
<p> Omg this is soooo hidden its amazing!</p>
<p> Omg this was also hidden, im so proud!</p>
</div>
<div class="toogle"> Click Me </div>
</p>
</div>
<br />
<div class="roundtest">
<p>
Hello World
<div class="hiddenInfo">
<p> Omg this is soooo hidden its amazing!</p>
<p> Omg this was also hidden, im so proud!</p>
</div>
<div class="toogle"> Click Me </div>
</p>
</div>
</body>
</html>
CSS
body {
background-color:white;
}
.roundtest {
font: 11px "Verdana", Arial, Helvetica, sans-serif;
width: 400px;
height: auto;
border: 1px solid green;
background-color: white;
color: #333;
-moz-border-radius: 5px;
-webkid-border-radius: 5px;
-moz-box-shadow:2px 2px 0 #c2c2c2;
-webkit-box-shadow:2px 2px 0 #c2c2c2;
box-shadow:2px 2px 0 #c2c2c2;
}
.hiddenInfo {
display: none;
}
Now the problem is that I am going to be using php to output the information and divs and my problem as shown above is that if each div has the same name and I click show information from one directory, it shows all the divs information.
I could manually name each div with a different name e.t.c but that would be a problem when it comes to the jquery part. I guess i could code 10 different click codes and name each div class from a number of 1 to 10 (displaying 10 directoryies on 1 page) at a time, then that might fix the problem, im unsure,
Sorry for the bad explanation, any hints tips code examples would be helpful. Bare in mind i do not want to use libs, i want to learn by creating this myself.
Thank you!
In this case, you'd want to look up the appropriate content section by traversing the DOM inside the click event handler.
$('.toogle').click( function() {
// get the sibling node with class 'hiddenInfo'
var mysection = $(this).prev('.hiddenInfo');
mysection.slideToggle('slow');
});
加载中,请稍侯......
精彩评论