CODEWITHSUNDEEP
javascriptjqueryhtmlaccordion
Anthony Do
Anthony Do

Reputation: 1419

Javascript - jquery,accordion

<div id="wrapper">
    <div class="accordionButton">Personal Information</div>
    <div class="accordionContent">      
    Personal text
    </div>
    <div class="accordionButton">Experience</div>
    <div class="accordionContent">
    Experience information
    </div>
    <div class="accordionButton">Training</div>
    <div class="accordionContent">
    No skills
    <div class="accordionButton">Career</div>
    <div class="accordionContent">
    Never had a job
    </div>
    <div class="accordionButton">Referers</div>
    <div class="accordionContent">
    None.
    </div>
</div>

This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.

Jquery:

$(document).ready(function() {

    // When div is clicked, hidden content divs will slide out  
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });


    // Close all divs on load page  
    $("div.accordionContent").hide();

});

If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?

Upvotes: 1

Views: 1981

Answers (4)

dimitar
dimitar

Reputation: 1057

Try this very simple solution

HTML

<div class="accordion-container">
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
</div>

jQuery

$('.accordion-content .accordion-title').on('click', function(){ 
    $(this).toggleClass('active');
    $('.accordion-title').not($(this)).removeClass('active');
    $(this).next().slideToggle();
    $(".accordion-toggle").not($(this).next()).slideUp();
});

Upvotes: 0

BlueEyes
BlueEyes

Reputation: 54

Why not use slideToggle() instead of IF statements....

Upvotes: 0

Akshat Goel
Akshat Goel

Reputation: 528

You can use jquery selector for first div and set it as show(). Something like :

  $('div.accordionContent:first').show();

Upvotes: 2

FrontEnd Expert
FrontEnd Expert

Reputation: 5813

I think you have to try this:-

<script type="text/javascript">
    $.fn.accordion = function(settings) {
        accordion = $(this);
    }
    $(document).ready(function($) {
        $('div.accordionContent').click(function() {

            if($(this).next().is(":visible")) {
                $(this).next().slideDown();
            }

            $('div.accordionContent').filter(':visible').slideUp();
            $(this).next().slideDown();
            return false;
        });
    });

</script>

Upvotes: 0

Related Questions