How can i replace hide button in this code with toggle?
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").cli开发者_JAVA技巧ck(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
</body>
</html>
what im trying to do is to replace hide button with toggle butto. So every time i press button i can hide or show info. How i do that?
Because the button gets hidden at the moment, you won't be able to show again.
What about if you remove the buttons, and use a click on the header to toggle the other info?
Like:
$(document).ready(function(){
$("h3").click(function(){
$(this).next("div").toggle("slow");
});
});
...or you could keep the button and just toggle the <p> element after it:
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).next("p").toggle("slow");
});
});
- You need to have the button outside the div it toggles in order to toggle with it.
- You need to have separate id's for you div's
加载中,请稍侯......
精彩评论