A Pen by jlevinsohn

Thumbnail
This awesome code was written by jlevinsohn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jlevinsohn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  jlevinsohn</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

      <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
    <div class="expander">
        <h2>Question</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae neque nec dolor aliquet aliquam id aliquam orci. Aliquam erat volutpat.</p>
        <span class="icon-plus"></span>
        <span class="icon-minus"></span>
    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jlevinsohn/a-pen-by-jlevinsohn-CvKpJ */
h2 {
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-style: italic;
}

.expander {
  max-height: 15px;
  overflow: hidden;
  -moz-transition: max-height 0;
  -o-transition: max-height 0;
  -webkit-transition: max-height 0;
  transition: max-height 0;
  background-color: lightgray;
  padding: 15px;
  position: relative;
  margin-top: 15px;
}
.expander.show {
  max-height: 3500px;
  -moz-transition: max-height 1.5s;
  -o-transition: max-height 1.5s;
  -webkit-transition: max-height 1.5s;
  transition: max-height 1.5s;
}
.expander:first-child {
  margin-top: 0;
}
.expander .icon-minus,
.expander .icon-plus {
  position: absolute;
  right: 15px;
  top: 15px;
}
.expander.show .icon-minus {
  display: block;
}
.expander.show .icon-plus {
  display: none;
}


/*Downloaded from https://www.codeseek.co/jlevinsohn/a-pen-by-jlevinsohn-CvKpJ */
$(document).ready(function() {
  $('.expander').on("click", function(e) {
            var expanderContainer = $(this),
                allExpanders = $('.expander');

            if (expanderContainer.hasClass("show")){
              expanderContainer.removeClass("show");
            } else {
              allExpanders.removeClass("show");
              expanderContainer.toggleClass("show");
            }
    });
});

Comments