Tab Menu

Usage

Easily include tabs in your project with the responsive tabs menu.

Link in the core jQuery library and then the tabs plugin code into your html:

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="js/sleek-plugins.js"></script>
          

Call the .sleekTabs()plugin method on the id="tabs" using the jQuery selector $('#tabs') and include the script into your html code with the tabs.

  <script>
    $(function(){
      $('#tabs').sleekTabs();
    });
  </script>
          

Demo

HTML

Copy the code below to your HTML and make sure to include the <section> tag with id="tabs". Make sure to also add a div with class="clr" after the closing </section> tag

  <section id="tabs">
    <ul>
      <li><a class="activetab" href="#tab1txt">Tab 1</a></li>
      <li><a href="#tab2txt">Tab 2</a></li>
      <li><a href="#tab3txt">Tab 3</a></li>
    </ul>
    <section>
      <p class="activetxt" id="tab1txt">You're on the tab 1 overview, varius eu nisi sit amet, porttitor pellentesque ex.</p>
      <p id="tab2txt">You're on the tab 2 overview, varius eu nisi sit amet, porttitor pellentesque ex.</p>
      <p id="tab3txt">You're on the tab 3 overview, varius eu nisi sit amet, porttitor pellentesque ex.</p>
    </section>
  </section>
  <div class="clr"></div>
      

Accordion

Usage

Easily include an accordion in your project.

Link in the core jQuery library and then the accordion plugin code into your html:

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="js/sleek-plugins.js"></script>
          

Call the .sleekAccordion()plugin method on the id="accordion" using the jQuery selector $('#accordion') and include the script into the html code with the accordion.

  <script>
    $(function(){
      $('#accordion').sleekAccordion();
    });
  </script>
          

Demo

HTML

Copy the code below to your HTML and make sure to include the <section> tag with id="accordion".

  <section id="accordion">
    <ul>
      <li>
        <h1><a href="#accordion-1"><span>+</span> Accordion 1</a></h1>
        <div id="accordion-1">
          <p>You're on the accordion 1, varius eu nisi sit amet, porttitor pellentesque ex.</p>
        </div>
      </li>
      <li>
        <h1><a href="#accordion-2"><span>+</span> Accordion 2</a></h1>
        <div id="accordion-2">
          <p>You're on the accordion 2, varius eu nisi sit amet, porttitor pellentesque ex.</p>
        </div>
      </li>
      <li>
        <h1><a href="#accordion-3"><span>+</span> Accordion 3</a></h1>
        <div id="accordion-3">
          <p>You're on the accordion 3, varius eu nisi sit amet, porttitor pellentesque ex.</p>
        </div>
      </li>
    </ul>
  </section>
    

Image Slideshow

Usage

Easily include images in your project with the responsive slideshow. The navigation will automatically increase as you add more images.

Link in the core jQuery library and then add the image slider plugin code into your html:

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="js/sleek-plugins.js"></script>
    

Call the .sleekSlider()plugin method on the class="slideshow" using the jQuery selector $('.slideshow') and include the script into the HTML code with the image slider.

  <script>
    $(function(){
      $('.slideshow').sleekSlider();
    });
  </script>
    

Demo

HTML

Copy the code below to your HTML and make sure to include the <img> tag with class="slide" which is for the starting image.

  <div class="slideshow">
    <div class="slide-navigation"></div>
      <img class="slide" src=img/desert_1600x900.jpg" alt="">
    <div class="slides">
      <img src="img/desert_1600x900.jpg" alt="">
      <img src="img/ocean_1600x900.jpg" alt="">
      <img src="img/rally_1600x900.jpg" alt="">
      <img src="img/tv_1600x900.jpg" alt="">
      <img src="img/type_1600x900.jpg" alt="">
    </div>
  </div>