Sunday, 25 February 2018

Interview question:5 anchor tag and 5 span tag. on click of anchor tag show only that respective span tag others should not show.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


$(document).ready(function(){
$(".item span").hide();

$(".item a").click(function(e){
e.preventDefault();
var $this=$(this).parent().find("span");
$(".item span").not($this).hide();
$this.toggle();

});


});
</script>
</head>
<body>

<div class="item"><a href="#">aaa1</a><span>ppp1</span></div>
<div class="item"><a href="#">aaa2</a><span>ppp2</span></div>
<div class="item"><a href="#">aaa3</a><span>ppp3</span></div>
<div class="item"><a href="#">aaa4</a><span>ppp4</span></div>
<div class="item"><a href="#">aaa5</a><span>ppp5</span></div>


</body>
</html>

No comments:

Post a Comment