Grow your CSS skills. Land your dream job.

JQuery Toggle with arrow

  • # October 24, 2009 at 3:39 pm

    I’m building a list of FAQs that I want to toggle to expand the answer. I have it started. I don’t know JQuery very well, so I’m trying to find a tutorial online. I’ve found one, but now I want to add an arrow to the side of the header that will turn down when the section is toggled.

    Here’s the script:

    Code:
    // hover effect
    $(document).ready(function() {
    $(‘div.demo-show h3′).add(‘div.demo-show2 h3′).hover(function() {
    $(this).addClass(‘hover’);
    }, function() {
    $(this).removeClass(‘hover’);
    });
    });

    // independently show and hide
    $(document).ready(function() {
    $(‘div.demo-show:eq(0) > div’).hide();
    $(‘div.demo-show:eq(0) > h3′).click(function() {
    $(this).next().slideToggle(‘fast’);
    });
    });

    // one showing at a time

    $(document).ready(function() {
    $(‘div.demo-show:eq(1) > div:gt(0)’).hide();
    $(‘div.demo-show:eq(1) > h3′).click(function() {
    $(this).next(‘div:hidden’).slideDown(‘fast’)
    .siblings(‘div:visible’).slideUp(‘fast’);
    });
    });

    //simultaneous showing and hiding

    $(document).ready(function() {
    $(‘div.demo-show2:eq(0) > div’).hide();
    $(‘div.demo-show2:eq(0) > h3′).click(function() {
    $(this).next(‘div’).slideToggle(‘fast’)
    .siblings(‘div:visible’).slideUp(‘fast’);
    });
    });

    //queued showing and hiding
    $(document).ready(function() {
    $(‘div.demo-show2:eq(1) > div’).hide();
    $(‘div.demo-show2:eq(1) > h3′).click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings(‘div:visible’);

    if ($visibleSiblings.length ) {
    $visibleSiblings.slideUp(‘fast’, function() {
    $nextDiv.slideToggle(‘fast’);
    });
    } else {
    $nextDiv.slideToggle(‘fast’);
    }
    });
    });

    Here’s the CSS:

    Code:
    .demo-show {
    width: 350px;
    margin: 1em .5em;
    }

    .demo-show h3 {
    margin: 0;
    padding: .25em;
    background: #bfcd93;
    border-top: 1px solid #386785;
    border-bottom: 1px solid #386785;
    }

    .demo-show div {
    padding: .5em .25em;
    }

    And here’s the page I’m putting it on: http://www.ekcetera.com/faq/faq.php

    I just want to add a little arrow that will toggle down and up when "Title" is clicked.

    Can anyone help?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".