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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Expandable Section Boxes - by Stramaxon</title>
</head>
<body>
  
  
  <div class='back-to-post'>
    <a href='http://www.stramaxon.com/2013/09/expandable-section-boxes.html' target='_blank'>‹‹ Back to tutorial</a>
  </div>
  
  
  
  <div class='post-body'>
    <h2> Simple Example </h2>
    <p>Some lorem ispum text. Pellentesque ut tortor convallis, convallis mauris eget, hendrerit enim. Mauris molestie, diam id viverra molestie, sapien magna mollis purus, id sodales mi nibh ut lorem.</p>
​
<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Something to show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
    
    <p>Yaa!! Hey thanks for making me visible. This section was hidden by default but became visible only after you clicked the "Show button", now you can close it again after reading the secret text :)</p>
    <p>Not only text, you can even put links, images, or anything you can put using HTML. Even another Hidden section inside this.</p>
    
    
    
    
    <!-- All your text/html above this -->
  </div>
</div>
    
    <p>Another Lorem Ispum. Vestibulum in sem auctor nisl cursus tincidunt.</p>
    
    
    
  </div>
  
  
  
  
  
  
  
  
  
  
  
  
  
  <div class='post-body'>
    <h2> Expandable Box inside Boxanother </h2>
    <p>Some lorem ispum text. Pellentesque ut tortor convallis, convallis mauris eget, hendrerit enim. Mauris molestie, diam id viverra molestie, sapien magna mollis purus, id sodales mi nibh ut lorem.</p>
​
<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
    
    <p>Yaa!! Hey thanks for making me visible. This section was hidden by default but became visible only after you clicked the "Show button", now you can close it again after reading the secret text :)</p>
    <p>Not only text, you can even put links, images, or anything you can put using HTML. Even another Hidden section inside this.</p>
    
    <div class='hidden-section-container'>
  <div class='sh-section-btn'><span>See what happened last night</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
    
    <p>Yaa!! Hey thanks for making me visible. This section was hidden by default but became visible only after you clicked the "Show button", now you can close it again after reading the secret text :)</p>
    <p>Not only text, you can even put links, images, or anything you can put using HTML. Even another Hidden section inside this.</p>
    
    
    
    
    <!-- All your text/html above this -->
  </div>
</div>
    
    
    <!-- All your text/html above this -->
  </div>
</div>
    
    <p>Another Lorem Ispum. Vestibulum in sem auctor nisl cursus tincidunt.</p>
    
    
    
  </div>
  
  
  
  
  <div class='author-attr'>
    <a class='depy' href='http://www.stramaxon.com' target='_blank'>by Deepak Kamat</a>
  </div>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
depypro
0viewers