Jquery Piano Plugin

Load Demo


How to use:


JS and CSS:

              <head>
                  <!-- Piano stylesheet -->
                  <link rel="stylesheet" href="css/normalize.css" />
                  <link rel="stylesheet" href="css/piano.css" />
                  
                  <!-- minified jquery & Piano plugin script -->
                  <script src="js/jquery.min.js"></script>
                  <script src="js/jquery.piano.js"></script>
                  
                  <script>
                        $(document).ready(function() {
                            $("#container").piano(); 
                        });
                  </script>
              </head>

HTML:

             
              <div id="container">
                  <div>
                      <h3>some heading</h3>
                      <div>some text</div>
                  </div>
                  
                   <div>
                      <h3>some heading</h3>
                      <div><
                          <p>some text<p>
                          <p>some text<p>
                      </div>
                  </div>
                  
                   <div>
                      <h3>some heading</h3>
                      <div>
                          <ul>
                              <li>some text</li>
                              <li>some text</li>
                              <li>some text</li>
                          </ul>
                          <p>some text<p>
                      </div>
                  </div>
                  
                   <div>
                      <h3>some heading</h3>
                      <div><
                          <p>some text<p>
                      </div>
                  </div>
                  
              </div>

Load Demo