ik wil op mijn site meerdere divs plaatsen en wanneer ik op h1 klik de content die onder zit weergeven. met één div lukt wel meer zodra ik op één h1 klik worden andere div's ook open geklapt.
weet iemand hoe ik dit moet oplossen??
weet iemand hoe ik dit moet oplossen??
Code:
$(document).ready(function(){
$(".div-t h1").click(function(){
$(".divCon").slideToggle("5000");
});
});
Code:
<div class="div1">
<div class="div-t">
<h1>Webdeveloping</h1>
</div>
<div class="divCon">
<ul>
<li>Voorkennis</li>
<li>Beetje geschiedenis</li>
<li>Het ontstaan</li>
<li>Soorten webdeveloping</li>
<li>Webserver</li>
<li>De OSI-laag</li>
<li>HTML5</li>
<li>CSS-3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>mySQL</li>
<li>XHTML</li>
<li>XML</li>
<li>AJAX</li>
<li>JSON</li>
<li>WebDev-frameworks</li>
</ul>
</div>
</div>
<div class="div1">
<div class="div-t">
<h1>Front-end developing</h1>
</div>
<div class="divCon">
<ul>
<li>Voorkennis</li>
<li>Definitie van front-endDev</li>
<li>Verschillen met Back-endDev</li>
<li>Gereedschap</li>
<li>Een FEDEV worden</li>
<li></li>
<li>Gereedschap</li>
</ul>
</div>
</div>
<div class="div1">
<div class="div-t">
<h1>Back-end-developing</h1>
</div>
<div class="divCon">
<ul>
<li>Voorkennis</li>
<li>Beetje geschiedenis</li>
<li>Webserver</li>
<li>De OSI-laag</li>
</ul>
</div>
</div>
Code:
.div1
{
position: relative;
top: 150px;
width: 250px;
float: left;
}
.div1 .div-t h1
{
font-weight: bold;
font-size: 20px;
text-align: left;
}
.divCon ul
{
margin:0px auto;
margin-left: -40px;
}
.divCon ul li
{
list-style: none;
padding: 5px;
}
.divCon ul li:hover
{
color: #A00;
}
.divCon
{
display: none;
}
