Hello everyone,
Hopefully I don't start a new forum, if so, please close this one and let me know where to find the right forum...
But I'll give it a shot anyway, I'm really new at jQuery, but it's unbelievable interesting. But I've run into a problem, I just can't seem to get to toggle between show/hide a div. When I implement the jQuery it's showing or hide all the Div's and let mee see only the first one....
I'm using the following jQuery code, plz let me know how I mess up:
$(document).ready(function() {
$('#content1').hide();
$('a').click(function(){
$('#content1').toggle('slow');
});
$('a#close1').click(function(){
$('#content1').toggle('slow');
})
});
$(document).ready(function() {
$('#content2').hide();
$('a').click(function(){
$('#content2').toggle('slow');
});
$('a#close2').click(function(){
$('#content2').toggle('slow');
})
});
$(document).ready(function() {
$('#content3').hide();
$('a').click(function(){
$('#content3').toggle('slow');
});
$('a#close3').click(function(){
$('#content3').toggle('slow');
})
});
The HTML code is the following:
<div class="post">
<h2 class="title" input id="hidecontent1" value="toggle">
<div class="entry">
<div id="content1">
<p>
</input> <a href="#" id="close1">Close</a></p></p></div>
</div>
</div>
<div class="post">
<h2 class="title" input id="hidecontent2" value="toggle">
<div class="entry">
<div id="content2">
<p>
</input> <a href="#" id="close2">Close</a></p></p></div>
</div>
</div>
<div class="post">
<h2 class="title" input id="hidecontent3" value="toggle">
<div class="entry">
<div id="content3">
<p>
</input> <a href="#" id="close3">Close</a></p></p></div>
</div>
</div>