Skip to content

Instantly share code, notes, and snippets.

@Ginnw2

Ginnw2/gist:6c53a4fd9cf4af78284109a3ac162e13

Created October 20, 2020 13:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ginnw2/6c53a4fd9cf4af78284109a3ac162e13 to your computer and use it in GitHub Desktop.
Save Ginnw2/6c53a4fd9cf4af78284109a3ac162e13 to your computer and use it in GitHub Desktop.
Download ZIP
show/hide blocks
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</head>
<body>
<div class="blocks">
<div class="block">
<div class="show-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus itaque provident labore, sapiente nulla minima inventore consectetur tenetur sed expedita. Obcaecati, excepturi! Molestias, quo, maxime quidem officia placeat ex odio?
<div class="more">show more...</div>
</div>
<div class="hide-text">
hiden text
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum molestias quae porro recusandae tempore eaque quidem impedit unde ut, maxime, ad distinctio aliquam ducimus fugit eum velit iste corrupti quis.</div>
<div>Doloribus quaerat ipsa blanditiis rem magnam, maxime voluptate fugiat dolor temporibus officia iusto unde hic velit neque debitis provident est quasi accusamus. Porro ratione iste eveniet esse, odit, sed incidunt.</div>
</div>
</div>
<div class="block">
<div class="show-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus itaque provident labore, sapiente nulla minima inventore consectetur tenetur sed expedita. Obcaecati, excepturi! Molestias, quo, maxime quidem officia placeat ex odio?
<div class="more">show more...</div>
</div>
<div class="hide-text">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum molestias quae porro recusandae tempore eaque quidem impedit unde ut, maxime, ad distinctio aliquam ducimus fugit eum velit iste corrupti quis.</div>
<div>Doloribus quaerat ipsa blanditiis rem magnam, maxime voluptate fugiat dolor temporibus officia iusto unde hic velit neque debitis provident est quasi accusamus. Porro ratione iste eveniet esse, odit, sed incidunt.</div>
</div>
</div>
<div class="block">
<div class="show-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus itaque provident labore, sapiente nulla minima inventore consectetur tenetur sed expedita. Obcaecati, excepturi! Molestias, quo, maxime quidem officia placeat ex odio?
<div class="more">show more...</div>
</div>
<div class="hide-text">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum molestias quae porro recusandae tempore eaque quidem impedit unde ut, maxime, ad distinctio aliquam ducimus fugit eum velit iste corrupti quis.</div>
<div>Doloribus quaerat ipsa blanditiis rem magnam, maxime voluptate fugiat dolor temporibus officia iusto unde hic velit neque debitis provident est quasi accusamus. Porro ratione iste eveniet esse, odit, sed incidunt.</div>
</div>
</div>
</div>
</body>
<style type="text/css">
.hide-text{display: none;}
.show-text .more{display: block;cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".show-text .more").click(function(){
$(".hide-text").hide(500);
if($(this).parent().siblings(".hide-text").is(":visible")){
$(this).parent().siblings(".hide-text").hide(500);
}else{
$(this).parent().siblings(".hide-text").show(500);
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment