show/hide using jquery
I have trouble hiding and showing the p tag. Could someone help me with this code. What I am trying to accomplish is that when you click the hide button, the content is hidden. Then when you are ready to show the content you click the show button. I know you can uses the toggle but i dont want to do that
<!DOCTYPE html> <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
$("button").click(function(value){
if (value==="hide"){
$("p").hide();}
else
$("p").show();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
$("button").click开发者_运维问答(function(value){
if (value==="hide"){
$("p").hide();}
else
$("p").show();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
Currently it doesn't work with multiple content.
That is because you have duplicate IDs on your page. To fix that, use classes, and target the next .slickbox div from the clicked anchor:
$('a.slick-toggle').click(function() {
$(this).next("div").find(".slickbox").toggle(400);
return false;
});
..and change the IDs to classes, e.g.:
<a class="slick-toggle" href="#">Toggle the box</a>
<div style="position:relative; outline: 1px dashed orange; padding:100px;">
<div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;">
<h2> music nsme</h2>
<p>This is the box that will be shown and hidden and togg </p>
</div>
</div>
加载中,请稍侯......
精彩评论