Toolbox Users Forum

Home » Uncategorized » Using “accordion” code

Using “accordion” code

Thanks to Kathleen Boros-Wooley for sharing this tip on how to use accordion code in the CMS. This helps create drop downs within a page….

If you have not used any accordion code on your pages and would like to do so, here is the code. Just copy and paste this into your page and edit the question and answers.

You can see what it looks like here…

http://go.sdsu.edu/education/ste/clear_credential.aspx?

$(document).ready(function() {

$(‘.accordionButton’).click(function() {
$(‘.accordionButton’).removeClass(‘on’);
$(‘.accordionContent’).slideUp(‘normal’);
if($(this).next().is(‘:hidden’) == true) {

$(this).addClass(‘on’);

$(this).next().slideDown(‘normal’);
}
});
$(‘.accordionButton’).mouseover(function() {
$(this).addClass(‘over’);

}).mouseout(function() {
$(this).removeClass(‘over’);
});
$(‘.accordionContent’).hide();

});

headline
paragraph text before your accordian

question
answer goes here

question
answer goes here

question
answer goes here

question
answer goes here

question
answer goes here

question
answer goes here
Block quote code

• Welcome to San Diego State University’s School of Teacher Education
• Making a difference in the lives of children, adolescents, and families since 1897.

Advertisements

4 Comments

  1. Keith Parks says:

    I was thinking about this more (because I really would like to use an accordion like this) and was wondering if the script could be altered to also call the function when the Enter key is pressed?

    I did some googling and found stuff about using .keydown to call a function and then checking if the keycode = 13 (for the Enter key) but I simply do not understand javascript syntax enough to try and modify the code. Anyone in the group know how it might be done?

  2. Keith Parks says:

    I hate to be a stickler about accessibility, but since that is one issue the CMS is supposed to help address, it seems like this sort of scripting does not meet accessibility requirements.

    Specifically, since the clickable text “questions” are not links, they are not reachable through tabbing. Thus someone who does not use a mouse cannot access the information hidden in the accordion sliders.

    Or am I missing something?

  3. mannyuribe says:

    Great tip! I just used it all over the place here:

    http://dus.sdsu.edu/dus/ctl/teaching_rtp.aspx

  4. Jeff Ernst says:

    It’s a little more complicated…

    First the user must place this part into a free text area:

    $(document).ready(function() {

    $(‘.accordionButton’).click(function() {
    $(‘.accordionButton’).removeClass(‘on’);
    $(‘.accordionContent’).slideUp(‘normal’);
    if($(this).next().is(‘:hidden’) == true) {

    $(this).addClass(‘on’);

    $(this).next().slideDown(‘normal’);
    }
    });
    $(‘.accordionButton’).mouseover(function() {
    $(this).addClass(‘over’);

    }).mouseout(function() {
    $(this).removeClass(‘over’);
    });
    $(‘.accordionContent’).hide();

    });

    BUTTON 1
    BUTTON 2

    Then add this to their CSS:

    /*ACCORDIAN FUNCTION STYLE*/

    .accordionButton
    {
    background-color: #e8ddb4;
    margin-top: 3px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    font-weight: 600;
    }

    .accordionButton:hover
    {
    cursor: pointer;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: