Miscellanous

Tootips

Normal Tooltip - This is a normal tooltip with default settings. 
<a href="more.html" class="normaltip" title="Hello, I am aToolTip">Normal Tooltip</a>
In order to activate the tooltip you need to add class="normaltip" class and insert the necessary text to the title attribute.
Fixed Tooltip - This is a fixed tooltip that doesnt follow the mouse. 
<a href="more.html" class="fixedtip" title="Hello, I am aToolTip"><img src='images/small_pic5.jpg' alt='' title='Nice Horsy'  />Fixed Tooltip</a>
In order to activate the tooltip with fixed position you need to add class="fixedtip" class and insert the necessary text to the title attribute.
On Click Tooltip - This is a click activated tooltip with content passed in from 'tipContent' param 
<a href="more.html" class="clicktip" >On Click Tooltip</a>
In order to activate the tooltip with fixed position you need to add class="clicktip" class and insert the necessary text to the title attribute. Then you will need to add the following script to the head section: 
$('.clicktip').aToolTip({
  clickIt: true,  
  tipContent: 'Hello I am aToolTip with content from param'  
});
where the value of tipContent parameter defines the tooltip text.
top

SlideDown Elements

Normal SlideDown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices arcu quis turpis pretium et porttitor magna sollicitudin. Cras venenatis quam et tellus tristique bibendum eget ut Morbi tristique risus non augue viverra a adipiscing felis interdum. In eget elit massa.

SlideDown trigger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices arcu quis turpis pretium et porttitor magna sollicitudin. Cras venenatis quam et tellus tristique bibendum ut lacus. Morbi tristique risus non augue viverra a adipiscing felis interdum. In eget elit massa.

Mauris dapibus rhoncus lectus, id viverra risus imperdiet vitae. In consequat luctus quam, sit amet hendrerit mauris commodo sit amet. Suspendisse fermentum lorem quis turpis semper Nullam ornare libero ac felis interdum non adipiscing nisi facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices arcu quis turpis pretium et porttitor sollicitudin. Cras venenatis quam et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices arcu quis turpis pretium et porttitor. 
<dl class="slideDown">
  <dt>SlideDown trigger</dt>
  <dd>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </dd>
</dl>
Here you will simply need to add slideDown class to any dl-list (<dl class="slideDown">).
top

Absolute Position SlideDown

SlideDown trigger (absolute position desc)
Mauris dapibus rhoncus lectus, id viverra risus imperdiet vitae. In consequat luctus quam, sit amet hendrerit mauris commodo sit amet. Nullam ornare libero ac felis interdum non adipiscing nisi. Suspendisse ultrices arcu quis turpis pretium et porttitor magna elit. Suspendisse ultrices arcu quis turpis pretium et porttitor magna sollicitudin. Suspendisse ultrices arcu quis turpis pretium et quis turpis pretium et porttitor. amet, consectetur adipiscing elit. Suspendisse. Mauris dapibus rhoncus lectus, id viverra risus hendrerit mauris.

Ut vel dolor sapien. Phasellus mauris risus, euismod sed pretium consequat, aliquet in nisl. Nulla ut ligula id odio sagittis tincidunt. Nam sit amet massa est. Praesent sollicitudin sollici turpis, vel dignissim metus tincidunt sed. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat. Mauris neque nisi, eleifend eu tincidunt sollicitudin vel turpis. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat.

Donec felis dolor, tincidunt dignissim pellentesque aliquet, vestibulum non tellus. Donec quis lectus id leo imperdiet gravida. Suspendiss massa, volutpat tempor tempus gravida, adipiscing at augue. Fusce id tellus dui, nec pretium urna. Vivamus ac turpis neque. Vestibulum sed feugiat interdum non ac purus. Ut nisl mauris, mollis sagittis cursus sed, rhoncus sit amet ipsum. Duis vel nisl orci. Maecenas in tortor. 

<dl class="slideDown absolute">
  <dt>SlideDown trigger</dt>
  <dd>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </dd>
</dl>
Here you will simply need to add slideDown and absolute classes to any dl-list (<dl class="slideDown">).
top

Twitter

<div id="twitter" class="twitter"> </div>

You can add Twitter-widget and configure it quite easily:

  1. Insert a div with twitter class and twitter id to a desired location on the page:
    <div id="twitter" class="twitter"> </div>
  2. Next you need to configure twitter-widget to use your twitter-account. In order to do this you should change the user name in the initiasization script:
    userName: "lorem_ipsum_dol"
  3. Then choose the number of tweets to display:
    numTweets: 5
top

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent scelerisque mollis nisi sit amet blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.

Nulla aliquet ornare nulla, id accumsan nunc aliquet quis. Aliquam commodo urna eu enim tempus id consequat felis volutpat.

Proin non venenatis metus. Donec felis ante, venenatis et pellentesque vitae, pulvinar interdum nisi. 
<div class="tabs">
  <ul class="nav">
    <li class="selected"><a href="#tab1">text1</a></li>
    <li><a href="#tab2">text2</a></li>
    <li><a href="#tab3">text3</a></li>
  </ul>
  <div id="tab1" class="tab-content">
    <div class="inner">
      <-- insert content here -->
    </div>
  </div>
  <div id="tab2" class="tab-content">
    <div class="inner">
      <-- insert content here -->
    </div>
  </div>
  <div id="tab3" class="tab-content">
    <div class="inner">
      <-- insert content here -->
    </div>
  </div>
</div>
In order to create tab-blocks (tabs) you need:
  1. Create a block with tabs class (class="tabs"). 
    <div class="tabs"> </div>
  2. Created a bulleted list with nav class inside this block(<ul class="nav">).
  3. Each list item would represent a tab: 
    <li><a href="#tab1">...</a></li>
    The href attribute contains the reference to the content block (This will be the tab content).
  4. Add selected class to the first list item.
  5. Then you will need to create a set of <div> tags with tab-content class (class="tab-content"), that represent tabs content. In order to add paddings to the content you will need to use <div> with inner class. 
    <div id="tab1" class="tab-content">
  <div class="inner">
    <-- insert content here -->
  </div>
</div>
    Make sure to specify unique id for every tab(id="tab#")

Accordion

Automation
Chemicals
Power
Automation
Instrum
Metals
<dl id="accordion"> 
  <dt><a href="more.html">Automation & Electronics</a></dt> 
  <dd> 
    <div class="indent"> 
      <ul class="list-1"> 
        <li><a href="more.html">Accelerators</a></li> 
        <li><a href="more.html">Access Control Systems</a></li> 
        ....
      </ul> 
    </div> 
  </dd> 
  <dt><a href="more.html">Chemicals</a></dt> 
  <dd> 
    <div class="indent"> 
      <ul class="list-1"> 
        <li><a href="more.html">Lorem ipsum</a></li> 
        <li><a href="more.html">Dolor sit amet</a></li> 
        <li><a href="more.html">Praesent vestibulum</a></li> 
        ...
      </ul> 
    </div> 
  </dd> 
</dl>
In order to create an accordion you just need to add this HTML coding and add #accordion id dl tag (id="accordion").