jQuery assistance with hidden dropdowns
Alright friends of the WebDev community, I am just mucking around here and I am having issues getting the second div once clicked to hide the original div.
I would like to have it maintain the same dimensions and only allow one tab to be clicked and shown. I'm still rough around the edges with jQuery so any help would greatly be appreciated.
I have formatted everything inline to show all the code, Thanks in advance.
WDH
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/jav开发者_开发技巧ascript">
$(document).ready(function(){
$(".clickOnePara").click(function(){
$(".divOneDropdown").slideToggle(999);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickTwoPara").click(function(){
$(".divTwoDropdown").slideToggle(999);
});
});
</script>
<style type="text/css">
.divOneDropdown, .clickOnePara {
background: none repeat scroll 0 0 #E5EECC;
border: 1px solid #C3C3C3;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickOnePara{
width: 20%;
float: left;
}
.divTwoDropdown, .clickTwoPara {
background: none repeat scroll 0 0 #E5EECC;
border: 1px solid #C3C3C3;
cursor: pointer;
margin: 0;
padding: 5px;
position: relative;
text-align: center;
top: 5px;
}
.clickTwoPara{
width: 20%;
float: left;
left: 4px;
}
.divOneDropdown {
display: none;
height: 200px;
position: relative;
top: 30px;
}
.divTwoDropdown {
display: none;
height: 200px;
position: relative;
top: 30px;
}
#contained{
border: black solid 2px;
width: 800px;
height: 600px;
position: relative;
margin: auto;
}
#topNavs{
position: absolute;
left: 200px;
width: 100%;
padding-bottom: 30px;
}
#contentDrops{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="contained">
<div id="topNavs">
<p class="clickOnePara">Show/Hide Div 1</p>
<p class="clickTwoPara">Show/Hide Div 2</p>
</div>
<div id="contentDrops">
<div class="divOneDropdown">
<p>Blah... .. . Blah... .. . Section 1</p>
</div>
<div class="divTwoDropdown">
<p>Blah... .. . Blah... .. . Section 2</p>
</div>
</div>
</div>
</body>
</html>
$(".clickOnePara").click(function() {
$(".divOneDropdown").slideToggle(999);
if ( $(".divTwoDropdown").css("display") != "none" ) {
$(".divTwoDropdown").slideUp(999);
}
});
$(".clickTwoPara").click(function() {
$(".divTwoDropdown").slideToggle(999);
if ( $(".divOneDropdown").css("display") != "none" ) {
$(".divOneDropdown").slideUp(999);
}
});
Something like this? http://jsfiddle.net/tqbMt/
加载中,请稍侯......
精彩评论