CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

An accordion is a great utility plugin essential for revealing hidden underlying contents within a specific box. Contents within expands and contracts when toggled.

Accordion class is identified by class name accordion-toggle with a corresponding descandant sibling class accordion which accommodates the concealed contents or information to be displayed when expanded. The contents within the container are displayed with the aid of unorder list when collapse or expand.

Plugin Class

Classes Definition
accordion-toggle Parent accordion container.
accordion Accordion sibling, can also have sibling if multiple.

Structure

single accordion

Set Up

Start by setting up the accordion container and assign the class attribute (accordion-toggle) to the -div- elements.

  
    <div class="accordion-toggle">
    <!-All corresponding sibling container goes here-->
    </div>
                        

Sibling Container

With the parent container already set up, you may use unorder-list element to store any hidden contents including the action button (holding the title label) and nested sibling container. Repeat the same procedure to create extensive content, provided you have more contents to be listed, but paying attention to the action button with ID attribute associated with the label.

The action buttons

Action button is required to enable the toggle event, in order to make it an effective one, user must apply a consistent naming convention such as toggle-1, toggle-2, toggle-3,...toggle-N, or button-1, ...button-N, or any conventional ID provided it matches the assigned id for label. The caret arrow is enabled by calling the icon class and assign it to span element, to create subtle effect.

The action button that trigger the opening of the hidden content hosted in the sibling container

  
        <!-- Hidden Action Button -->
	    <input id="action-1" type="checkbox" hidden="hidden" />
	    <label for="action-1">Title 
	    <span class="icon icon-caret-down"></span> </label>
                        

Code snippet sample shows the action button, the chevron (an indicator for the trigger)

  
  <ul>
    <li class="accordion">
        <!-- Hidden Action Button -->
	    <input id="action-1" type="checkbox" hidden="hidden" />
	    <label for="action-1">Title 
	    <span class="icon icon-caret-down"></span> </label>
	    <!-- Hidden Contents Show when toggled -->
	    <ul>
		  <li>place any elements such as div, anchor, paragraph e.t.c</li>
	    </ul>
    </li>
  </ul>
                        

Complete code snippet preliminary set up with -li- element holding contents placed in paragraph

  
  <ul>
    <li class="accordion">
        <!-- Hidden Action Button -->
	    <input id="action-1" type="checkbox" hidden="hidden" />
	    <label for="action-1">Title 
	    <span class="icon icon-caret-down"></span> </label>
	    <!-- Hidden Contents Show when toggled -->
	    <ul>
		  <li> 
               <p>
                    With the parent container set up, use <a href="list">unorder-list</a> 
                    element to store all the underlying contents including the
                    action button (hosting the title label) and nested hidden container. 
                     Repeat the same procedure to create extensive content, but paying attention
              </p>
         </li>
	    </ul>
    </li>
  </ul>
                        

Demo - Single Accordion

    • Title here

      Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis quis consectetur non, hendrerit eget augue.

    • Title here

      Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis quis consectetur non, hendrerit eget augue.

    • Title here

      Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis quis consectetur non, hendrerit eget augue.

    • Title here

      Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis quis consectetur non, hendrerit eget augue.

Complete code - single accordion

  
  <div class="accordion-toggle">
	<ul>
		<!-- Parent One -->
		<li class="accordion">
			<input id="action-1" type="checkbox" hidden="hidden" />
			<label for="action-1" class="color-text-jagua">
			Heading One <span class="icon icon-caret-down"></span> </label>
			<!-- Hidden and show when toggled -->
		  <ul>
			<li>
				<h5>Title here</h5>
				<p> Pellentesque at eros justo. Etiam vulputate nunc eu lacus 
				lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. 
				In nunc libero, sagittis quis consectetur non, hendrerit eget augue.</p>
			</li>
			<li>
				<h5>Title here</h5>
				<p> Pellentesque at eros justo. Etiam vulputate nunc eu 
                   lacus lobortis pellentesque.
				Cras id venenatis nunc. Fusce id leo in ex varius ultrices. 
				In nunc libero, sagittis quis consectetur non, hendrerit eget augue.</p>
			</li>
		  </ul>
		</li>
		<!-- Parent Two -->
		<li class="accordion">
	        <input id="action-2" type="checkbox" hidden />
	        <label for="action-2" class="color-text-jagua">Heading Two 
	        <span class="icon icon-caret-down"></span> </label>
            <!-- Hidden and show when toggled -->
	        <ul>
		        <li>
			        <h5>Title here</h5>
			        <p> Pellentesque at eros justo. Etiam vulputate nunc 
                     eu lacus lobortis pellentesque. 
			        Cras id venenatis nunc. Fusce id leo in ex varius ultrices. 
			        In nunc libero, sagittis quis consectetur non, hendrerit eget augue.</p>
		        </li>
		        <li>
			        <h5>Title here</h5>
			        <p> Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis 
			        pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. 
			        In nunc libero, sagittis quis consectetur non, hendrerit eget augue.</p>
		        </li>
	        </ul>
		</li>
	</ul>
 </div>
                        

Double Accordion

Setting up double accordion is very simple, once you have established clean accordion set up as shown here, you just have to stack as many sibling as you might possible need, and you must ensure unique ID attribute is assigned to every toggled button to avoid mix matched. Every descendant sibling must have its corresponding ID to the label element.

  
                        
    <ul>
        <!-- Level One (Child One ) -->
	    <li class="accordion">
		    <input id="toggle-4" type="checkbox" />
		    <label for="toggle-4">
			    G16 Resources <span class="icon icon-caret-down"></span>
		    </label>
		    <ul>
			    <!--Descendant of Child One Item 1 -->
			    <li class="accordion">
				    <input id="toggle-4-1" type="checkbox" />
				    <label for="toggle-4-1">
					    G16Classes <span class="icon icon-caret-down"></span>
				    </label>
				    <!-- Embedding Information Expand on Toggle -->
				    <ul>
					    <li><a href="accordion">Accordion</a></li>
					    <li><a href="navbar">Bar</a></li>
					    <li><a href="badge">Badge</a></li>
					    <li><a href="buttons">Button</a></li>
				    </ul>
			    </li>
			    <!--Descendant of Child One Item 2 -->
			    <li class="accordion">
				    <input id="toggle-4-2" type="checkbox" />
				    <label for="toggle-4-2" class="color-text-jagua">
					    CSS Templates <span class="icon icon-caret-down"></span>
				    </label>
				    <!-- Embedding Information Expand on Toggle -->
				    <ul>
					    <li><a href="#">Sales Page</a></li>
					    <li><a href="#">Webinar Page</a></li>
					    <li><a href="#">One Page</a></li>
					    <li><a href="#">Landing Page</a></li>
				    </ul>
			    </li>
			    <li><a href="../tools/unit-converter">Grid Calculator</a></li>
		    </ul>
	    </li>
    </ul>
                        

Demo - multiple accordion

Complete code - Multiple accordion

 
        <div class="accordion-toggle">
          <ul>
	        <!-- Level One (Child One ) -->
	        <li class="accordion">
		        <input id="toggle-1b" type="checkbox" />
		        <label for="toggle-1b">G16 Resources 
		          <span class="icon icon-caret-down"></span>
		        </label>
		        <ul>
			        <!--Descendant of Child One Item 1 -->
			        <li class="accordion">
				        <input id="toggle-1b-1" type="checkbox" />
				        <label for="toggle-1b-1">G16Classes 
				          <span class="icon icon-caret-down"></span>
				        </label>
				        <!-- Embedding Information Expand on Toggle -->
				        <ul>
					        <li><a href="#">Accordion</a></li>
					        <li><a href="#">Bar</a></li>
					        <li><a href="#">Badge</a></li>
					        <li><a href="#">Button</a></li>
				        </ul>
			        </li>
			        <!--Descendant of Child One Item 2 -->
			        <li class="accordion">
				        <input id="toggle-1b-2" type="checkbox" />
				        <label for="toggle-1b-2">CSS Templates 
				        <span class="icon icon-caret-down"></span>
				        </label>
				        <!-- Embedding Information Expand on Toggle -->
				        <ul>
					        <li><a href="#">Sales Page</a></li>
					        <li><a href="#">Webinar Page</a></li>
					        <li><a href="#">One Page</a></li>
					        <li><a href="#">Landing Page</a></li>
				        </ul>
			        </li>
			        <li><a href="#">Grid Calculator</a></li>
		        </ul>
	        </li>
	        <!-- Level Two-->
	        <li class="accordion">
		        <input id="toggle-2b" type="checkbox" />
		        <label for="toggle-2b" class="color-text-bahia">
			        G16 Resources
			        <span class="icon icon-caret-down"></span>
		        </label>
		        <ul>
			        <!--Descendant of Level Two Item 1-->
			        <li class="accordion">
				        <input id="toggle-2b-1" type="checkbox" />
				        <label for="toggle-2b-1">
					        G16Classes
					        <span class="icon icon-caret-down"></span>
				        </label>
				        <ul>
					        <!-- Embedding Information Expand on Toggle -->
					        <li><a href="#">Accordion</a></li>
					        <li><a href="#">Bar</a></li>
					        <li><a href="#">Badge</a></li>
					        <li><a href="#">Button</a></li>
				        </ul>
			        </li>
			        <!--Standalone -->
			        <li><a href="#">CSS Templates</a></li>
			        <li><a href="#">Grid Calculator</a></li>
		        </ul>
	        </li>
          </ul>
        </div>

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

  • Redefine your own style using the tab-link custom css
  • Extend the existing class name as defined in the tab-link [HTML] using the g16css plugins helper button.
  • Create unlimited tweaks with an option of adding new styles defined by you to the existing rule
  • Hit the re-run button to get your feedback instantaneously

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.