Skip to content

Instantly share code, notes, and snippets.

@ilmoralito

ilmoralito/showAndHide

Last active August 29, 2015 14:07
Show Gist options
  • Save ilmoralito/c4c75972b5f2f60d2970 to your computer and use it in GitHub Desktop.
Save ilmoralito/c4c75972b5f2f60d2970 to your computer and use it in GitHub Desktop.
Download ZIP
Show and hide content with jquery
Raw
showAndHide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.measures { display: none; }
</style>
</head>
<body>
<p><a href="#" class="presentation">Crema</a></p>
<div class="measures">
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
</div>
<p><a href="#" class="presentation">Unguento</a></p>
<div class="measures">
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
</div>
<p><a href="#" class="presentation">Talco</a></p>
<div class="measures">
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
<div class="checkbox">
Lorem ipsum dolor sit amet
</div>
</div>
<script src="jquery.js"></script>
<script>
$(".presentation").on("click", function(){
$(this).parent().next().toggle()
})
</script>
</body>
</html>
@ilmoralito
Copy link
Author

Mira que en el codigo original al crear los checkbox con geach se crean varios y por tanto
$(this).parent().next().toggle() en el codigo js solo afectaria al primero, por eso encerre los checkbox dentro un solo div con clase .measures, la puse invisible en el css y eso corrige el meo error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment