Meget simpelt jquery driller. Hide/show funktion skal kun hide/show næste div og ikke alle div
Hej EksperterJeg er ved at lave en side med noget hide/show og har kastet mig over Jquery.
Når man trykker på et billede, skal det komme en boks frem neden under. Det virker fint, men der skal være flere billeder og skal KUN være den boks under det billede man trykker på som skal vises og ikke alle div bokse.
Har prøvet med next() og det gider ikke helt for mig.
==========================================================
===================== KODE ===============================
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slide_button").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleClass("minus_icon"); return false;
});
});
</script>
<style type="text/css">
.slide_button {
background: url(http://www.musikfest.dk/1.png) no-repeat center 0px;
margin:0px 5px 0px 5px;
text-align: center;
width: 9px;
height: 9px;
padding: 0px 0px 0px 0px;
display: block;
color: #fff;
text-decoration: none;
}
.minus_icon {
background-position: center -8px;
}
div.panel,p.flip
{
margin:0px;
padding:0px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
display:none;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><p class="slide_button" onmouseover="this.style.cursor='hand'"></p></td>
<td>1+1</td>
</tr>
</table>
<div class="panel">
<table border="1">
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
<table border="1">
<tr>
<td><p class="slide_button" onmouseover="this.style.cursor='hand'"></p></td>
<td>2+2</td>
</tr>
</table>
<div class="panel">
<table border="1">
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>
