Dear Dylan!
There is a small issue..
I hope you can help me resolve that..
Now i have a lot of these Div's which go beyond the screen size.
If i click the last link, the screen is automatically set to the top of the page..
The Div that is clicked should remain focussed and in order to view that i have to scroll the page down again to view that.
What i am saying is if a link is beyound the scope of the screen and if i click that the screen should remain their only rather than sending it back to the top of the page..
And the second issue is that if i click the same link twice it should automatically Expand on ist click and Contract on second click. It is expanding on the ist click but not contracting the div area back on the second click using jQuery..
Try this code and you will come to know the issue!!
<head>
<script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
.hide
{
display: none;
}
</style>
</head>
<body>
<div>
<a href="#" class="menu1">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 3 </a>
<div id="mymenu3" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 4</a>
<div id="mymenu4" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 5 </a>
<div id="mymenu5" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 6 </a>
<div id="mymenu6" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 7</a>
<div id="mymenu7" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 8 </a>
<div id="mymenu8" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="menu1">Menu 9 </a>
<div id="mymenu9" class="hide">
<a href="#" >Link One here</a>
<a href="#" >Link Two here</a>
<a href="#" >Link Three here</a>
<a href="#" >Link Four here</a>
</div>
</div>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$('.menu1').bind('click', function() {
$('.menu1').next().addClass('hide');
$(this).next().removeClass('hide');
});
});
</script>
</body>