Hi, I've got a drop-down animation working on my website, simply by hovering over the link and clicking to toggle it. How do I change the code so it already shows the drop down on the webpage rather than clicking the link to reveal it?
Code:
<script type="text/javascript">
/* Tab2 */
$(document).ready(function () {
$('.active_tab').fadeIn();
$('#dropdown1').click(
function () {
//change the background of parent menu
$('#dropdown1 li a.parent').toggle('');
//display the submenu
$('#dropdown1 ul.children').slideToggle('normal');
},
function () {
//change the background of parent menu
$('#dropdown1 li a.parent').removeClass('hover');
//display the submenu
$('#dropdown1 ul.children').hide();
}
);
});
</script>
My websites code:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* Tab2 */
$(document).ready(function () {
$('.active_tab').fadeIn();
$('#dropdown1').click(
function () {
//change the background of parent menu
$('#dropdown1 li a.parent').toggle('');
//display the submenu
$('#dropdown1 ul.children').slideToggle('normal');
},
function () {
//change the background of parent menu
$('#dropdown1 li a.parent').removeClass('hover');
//display the submenu
$('#dropdown1 ul.children').hide();
}
);
});
</script>
<body>
<div id="box1">
<ul id="dropdown">
<a href="#" class="parent">Robert Beveridge</a>
<ul class="children">
</div>
<div id="box2">
<ul id="dropdown1">
<a href="#" class="parent">Information</a>
<ul class="children">
</body>
</html>
CSS
#dropdown1 {
/* Tab + Contents */
color:#000;
list-style:none;
left: 0px;
margin-left:10px;
padding:0;
position:relative;
background-color:#FDFDFD;
}
#dropdown1 li {
/* Sub-Title */
}
#dropdown1 li a.parent {
/* Title */ ;
margin: 5px 20px 20px 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 200;
background-color:#FDFDFD;
}
#dropdown1 li a.hover {
background-color:#FDFDFD;
}
#dropdown1 ul {
/* cancel the default list style */
margin:0;
padding:0px 0px 0px 5px;
list-style:none;
display:none;
/* make sure it has the highest z-index */
position:absolute;
left:-5px;
z-index:500;
width:705px;
background-color:#FDFDFD;
}
#dropdown1 ul li {
/* Drop down box */
font-size:11px;
line-height: 13px;
background-color:#FDFDFD;
}
#dropdown1 ul li a {
/* Dropdown box (colour,weight,size) */
font-weight: 200;
padding: 0px 0px 0px 0px;
visibility: visible;
top: 0px;
color:#000;
background-color:#FDFDFD;
}
#dropdown1 ul li a:hover {
color:#729392;