hide and show div content when clicking link inside grid
Question
I'm trying to hide or show div content when clicking on link. I have tried to use the same approach used in http://jsfiddle.net/fXE9p/ and still didn't work.
<body>
Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
What I'm trying to do is place a link in grid block, and once it's clicked the content of div will be displayed (the content including form fields). Is it not working because of the grid?
this is my code html:
<div role="main" class="ui-content">
<fieldset>
<div class="ui-grid-a">
<div class="ui-block-a" id="conGridOne"><a href="#" class="linkA">Block A</a></div>
<div class="ui-block-b" id="conGridTwo"><a href="#contactTabTwo">block B</a></div>
</div>
</fieldset>
<div id="linkA">
<p>This is block one</p>
</div>
<div id="id2" class="tabContent" data-href="contactTabTwo">
<h1>this is block two</h1>
</div>
</div>
jquery:
$("a.linkA").click(function(e){
e.preventDefault();
$("#" + $(this).attr("class")).show();
});
CSS:
#linkA{
display: none;
}
and yes i have linked jquery to my html document as follows:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
2 answers
solution1
0 2015-04-17 18:09:24
simple just assign the div a class that has display: block; and set the div by default to display:none;
EDIT: didn't realize that you wanted to hide the other divs when one was clicked. div{ display:none; }
</style>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("a").click(function() {
$("#"+this.className).siblings("div").hide();
$("#"+this.className).show();
});
</script>
</body>
</html>
EDIT CodePen Link added: http://codepen.io/DeveloperKnowledge/pen/KpPgbL
solution2
0 2015-04-17 18:14:52
Make sure you have your Script tags for jQuery . I prefer to put them just before the </body> tag.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
You can find the latest jQuery CDN here: http://jquery.com/download/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.