Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="cecutient-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, velit.</p>
    <a href="" class="cecutient-btn">more</a>
    <p class="more-info-open">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, deleniti, reiciendis. Ullam minus inventore facilis eligendi, doloremque! Totam perspiciatis quisquam ratione id quidem. Possimus earum deleniti culpa aperiam, quod illo.</p>
  </div>
  <div class="cecutient-item">
    <p>Dignissimos consectetur, harum amet accusamus labore? Explicabo distinctio aliquid corporis.</p>
    <a href="" class="cecutient-btn">more</a>
    <p class="more-info-open">Enim dolores quasi sint veritatis laudantium culpa quas in optio, et facilis ex iste, repudiandae eligendi mollitia ipsa quibusdam repellendus iure beatae qui officiis ratione praesentium quod error perspiciatis velit!</p>
  </div>
  <div class="cecutient-item">
    <p>Doloremque quisquam, veritatis nihil quas dolor ducimus veniam voluptate provident!</p>
    <a href="" class="cecutient-btn">more</a>
    <p class="more-info-open">Sunt aliquam quo animi at a est aspernatur modi qui minus dignissimos voluptatum mollitia placeat illum sint, possimus ad dolorem corporis, ipsam alias dolorum veniam quod! Iste molestias deserunt praesentium!</p>
  </div>
​
</body>
</html>
 
.cecutient-item {
  border: 1px solid;
  margin-bottom: 10px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
​
.active {
  display: none;
}
​
.more-info-open {
  display: none;
}
 
$(document).ready(function(){
  
  $(".cecutient-btn").click(function(){
    event.preventDefault();
    $(this).parent().find(".more-info-open")
    .slideToggle("slow")
    .toggleClass("active");
​
  });
​
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tati-simonenkopro
0viewers