jquery javascript show/hide toggle issues

Question

I have two issues. 1. I want to remove phase content from java so that I will only have StepsContent in it as I want expand all the steps. 2. when i click Step 1 first, and then click expand all, Step 1 collapses and expand all text issues. Any workaround. Also if there is an easier way to do this through Css please let me know.

JSFIDDLE http://jsfiddle.net/Y3GYR/1/

or below is the code:

   jQuery(".phaseContent").hide();
jQuery(".stepsContent").hide();
//toggle the componenet with phase level
jQuery(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".phaseContent").slideToggle(500);
    return false;
});
jQuery(".stepsHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".stepsContent").slideToggle(500);
    return false;
});

//Expand and collapse toggle

$(".accordion-expand-all").click(function () {
    var expandLink = $(this);
    var contentAreas = $(expandLink).closest(".phaseContent").find(".stepsContent");

    // Toggle the content area visibility
    $(contentAreas).toggle();

    // If the content area is now visible
    if ($(contentAreas).is(':visible')) {
        // Change it to the collapse text
        $(expandLink).text('Collapse - all steps');
    } else {
        // Change it to the expand text
        $(expandLink).text('Expand - all steps');
    }

    $(expandLink).closest(".phaseContent").find(".stepsHeading .heading1").toggleClass("active");

    return false;
});

HTML

            <!-- Start Phase -->
                           <!-- Start phase heading -->
                            <div class="phaseHeading"><span class="heading1">Phase 1</span>
                            </div>
                            <!-- Start phase content -->
                            <div class="phaseContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.

                                   <!--Expand steps button-->
                                        <p class="accordion-expand-holder">
                                            <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
                                        </p>

                                <!-- Start steps heading -->
                                    <div class="stepsHeading"><span class="heading1">Steps 1</span></div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
                                    </div>

                                <!-- Start step 2  -->

                                    <div class="stepsHeading"><span class="heading1">Steps 2</span> </div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
                                     </div>

                             <!-- Start step 2  -->

                                    <div class="stepsHeading"><span class="heading1">Steps 3</span> </div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
                                     </div>


</div>

deadulya · Accepted Answer · 2014-05-06 04:29:41Z

1

To right collapse\expand you need to manually select what to do, if you toggle array of elements

$(expandLink).closest(".phaseContent").find(".stepsContent")

it will toggle visibility of each of them. Just add a var, and put in it you current show\hide position like that:

    var collapsed = 1;
$(".accordion-expand-all").click(function () {
    ...
        if (collapsed == 0)
     {
        $(contentAreas).hide("slide");
        $(expandLink).text('Expand - all steps');
        collapsed =1;
    }
    else
    {
        $(contentAreas).show("slide");
        $(expandLink).text('Collapse - all steps');
        collapsed = 0;
    }
})

FIDDLE

answered May 6, 2014 at 4:29

deadulya

7166 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Poochi Teap Over a year ago

That was Awesome... Thanks Do you know how to remove that Phase Content. I actually dont want that only want Steps. The lines under var like ...$(expandLink).closest(".phaseContent").find(".stepsContent");

deadulya Over a year ago

Do not full understand what do you mean...if you want remove any element it is simple $(element).remove(), to find exactrly needed element you have a lot of selectors

Collectives™ on Stack Overflow

jquery javascript show/hide toggle issues

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related