By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121884 visitors

 1 visitor online

To create a vertical accordion.

  • Implementation
  • Code in article
  • jqstyle.css

You can create an accordion in an article.

CREATION OF THE ACCORDION :

  1. Create an article
  2. Copy the lines that are in this file
  3. Go to  iconeSOURCE.png  of the article
  4. Paste the lines
  5. Click again on SOURCE to exit

SAVE

 

If you have more or less than 4 tabs: in SOURCE, copy-paste, or delete lines for each image (replace [ by < ) :

[li>[a href="#">Title 4[/a>

[ul>

[li>

[div style="padding:6px;">Content 4[/div>

[/li>

[/ul>

[/li>

► Save the article

ampoule.png

To prevent some unpleasantness in shaping the content, it is easier to put in a table.

EXPLANATION OF CODE

(the tag < has been replaced by to prevent the activation of the code)

[script type="text/javascript">

&#36;(document).ready( function() {

&#36;("#gyaccordion3").hoverAccordion({

keepHeight: false,

activateItem: 1,

onClickOnly: true,

speed: 400

});

&#36;("#gyaccordion3").children("li:first").addClass("firstitem");

&#36;("#gyaccordion3").children("li:last").addClass("lastitem");

});

[/script>

Script of accordion

Do not forget to change the number of the ID !

In the skin folder

File jqstyle.css

#gyaccordion3

[div style="width:500px;margin:auto;">

[ul id="gyaccordion3" style="width:500px; margin:auto;">

Width of the accordion

[li>[a href="#">Titre 1[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 1[/div>

[/li>

[/ul>

[/li>

Title on witch you  click to open

Content (text, image, table...)

Tab 1

[li>[a href="#">Titre 2[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 2[/div>

[/li>

[/ul>

[/li>

Tab 2

[li>[a href="#">Titre 3[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 3[/div>

[/li>

[/ul>

[/li>

Tab 3

[li>[a href="#">Titre 4[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 4[/div>

[/li>

[/ul>

[/li>

Tab 4

[/ul>

[/div>

[div style="margin:8px;">[/div>

End of code for the accordion

Style is in the file jqstyle.css in the skin folder.

If you have multiple accordions and want to give them different colors or different sizes:

  • Copy the lines of this file at the end of the file jqstyle.css (if necessary for each accordion)
  • Give a different number to #gyaccordion to customize each accordion.

#gyaccordion3 {
    width: auto;
    height: auto;
    list-style-type: none;
    background-color: inherit;
    color: inherit;
}

Accordion

Do not forget to change the number!

#gyaccordion3 a {
    display: block;
    font-weight: bold;
    text-decoration: none;
}
Link
#gyaccordion3 ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
Title and content
#gyaccordion3 li {
    margin: auto;
    list-style-type: none;
    height:auto;
}
Title of each tab
#gyaccordion3 li a {
    width: auto;
    height: auto;
    padding: 4px;
    display: block;
    color: #FFF;
}
Link of each title
#gyaccordion3 li a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
    margin: 4px 0;
}
Closed link
#gyaccordion3 li.firstitem a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
}
First tab when closed
#gyaccordion3 li.lastitem a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
}
Last tab when closed

#gyaccordion3 li  li {
    max-width: 450px;
    height: auto;
    margin: auto;
    line-height: 15px;
    border: 0px solid #404040;
}

Content
#gyaccordion3 li a.opened {
    color: #fff;
    font-weight: bold;
    background-color: #821fe5;
    border: 0px solid #821fe5;
    margin: 4px 0;
    border-radius: 8px;
}
Opened tab
#gyaccordion3 li.firstitem a.opened {
    color: #fff;
    font-weight: bold;
    background-color: #821fe5;
    border: 0px solid #821fe5;
    margin: 4px 0;
    border-radius: 8px;
}
First tab when opened
#gyaccordion3 li.lastitem li {
    margin: 4px 0 12px 0;
}
Last tab
#gyaccordion3 li.lastitem ul {
    padding-bottom: 4px;
    margin: 0;
}
Last title and content

Associated keywords

Creation date : 10/04/2013 21:46
Last update : 13/04/2013 07:47
Page read 6273 times


You are here :   Home » Vertical accordion