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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    <meta name="generator" content="PSPad editor, www.pspad.com">  
    <title>
    </title>  
    <style>
#section_Q_01, #section_Q_02, #section_Q_03 {
  display: none;
  width: 400px;
  height: 300px;
}
      //the slider need this!
.pics {
  position: relative;
  height: 332px;
  width: 500px;
}
.pics img {
  position: absolute;
  left: 300;
  top: 0;
}     
.toggle_container .block { width: 200px; }
    </style>  
  </head>  
  <body>    
    <div style="width:700px">    
      <div style="float:left;width:200px"> 
        
        <div class="toggle_container">  
          <h5 class="trigger" id="Q_01" >
            <a href="#">Posture 1 : Standing Deep Breathing :</a></h5>                              
          <div class="block" style="display: none">                            
            <span class="sc">Pranayama Series
            </span>                            
            <p class="bold">Benefits:
            </p>                            
          </div>                        
        </div> 
        
        <div class="toggle_container">  
          <h5 class="trigger" id="Q_02" >
            <a href="#">Posture 2 : Standing Deep Breathing :</a></h5>                              
          <div class="block" style="display: none">                            
            <span class="sc">Pranayama Series
            </span>                            
            <p class="bold">Benefits:Increases Flexibility of the spine and hamstrings<br />
Increased flexibility of the shoulder muscles, hip joints and last five vertebrae of the spine<br />
Stretches sciatic nerve, improves circulation to the liver, spleen, pancreas, thyroid, thymus and intestines<br />
Improved flexibility of sciatic nerves, ankles, knees and hip joints<br />
Improves digestion and circulation of blood to legs and brainIncreases Flexibility of the spine and hamstrings<br />
Increased flexibility of the shoulder muscles, hip joints and last five vertebrae of the spine<br />
Stretches sciatic nerve, improves circulation to the liver, spleen, pancreas, thyroid, thymus and intestines<br />
Improved flexibility of sciatic nerves, ankles, knees and hip joints<br />
Improves digestion and circulation of blood to legs and brain
            </p>                            
          </div>                        
        </div>  
        
        <div class="toggle_container">  
          <h5 class="trigger" id="Q_03" >
            <a href="#">Posture 3 : Third posture :</a></h5>                              
          <div class="block" style="display: none">                            
            <span class="sc">Pranayama Series
            </span>                            
            <p class="bold">Benefits:
            </p>                            
          </div>                        
        </div>
        
        </div>        
      </div>           
      <div style="float:right;width:400px">  
        
        <div id="default_img">
              <div class="pics">
                <img src="http://gallery.techarena.in/data/500/4040-images.jpg">
              </div>
            </div>
        
        <div id="section_Q_01" class="01">                        
          <div class="pics">                            
            <img src="http://l.yimg.com/g/images/home_photo_jam343.jpg"/>                            
            <img src="http://l.yimg.com/g/images/home_photo_xdjio.jpg"/>                        
            <img src="http://l.yimg.com/g/images/home_photo_rappensuncle.jpg"/>                        
          </div>                      
        </div>                             
        <div id="section_Q_02" class="02">                        
          <div class="pics">             
            <img src="http://l.yimg.com/g/images/home_photo_notsogoodphotography.jpg" />            
            <img src="http://l.yimg.com/g/images/home_photo_ccgd.jpg" />            
            <img src="http://l.yimg.com/g/images/home_photo_pmorgan.jpg" />                          
          </div>                      
        </div>
        <div id="section_Q_03" class="03">                        
          <div class="pics">             
            <img src="http://l.yimg.com/g/images/home_photo_notsogoodphotography.jpg" />                        
          </div>                      
        </div>      
        
      </div>        
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers