jquery javascript show/hide toggle remove stuff

Question

I want to remove Phase Content (1st header - See fiddle) and want only these in my code:

Expand - all steps

• Steps 1
• Steps 2
• Steps 3

The above should appear without Phase Content in the code. But i dont know how to change the javascript so as to remove the Phase Content and work only with Steps Content

JSFIDDLE

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>

Answer 1

i have updated your jsFiddle , hope you get your solution.

changed javascript part

jQuery(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".phaseContent").slideToggle(500);
    jQuery(".phaseContent1").hide();
    jQuery(".phaseHeading").hide();
    return false;
});

changed html part

<div class="phaseContent1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
</div>

or you can also remove this changed div from html and jQuery(".phaseContent1").hide(); from changed js

Answer 2

I update your Fiddle. Please check this jsFiddle

I remove phaseHeading from your HTML and put one Div above accordion-expand-holder name <div class="stepsParent">

<div class="stepsParent">
    <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>

Also change JS like Below

$(document).ready(function () {
    $(".accordion-expand-all").parent().parent().find(".stepsContent").hide("slide");
    jQuery(".stepsHeading .heading1").click(function () {
        $(this).toggleClass("active");
        var th = jQuery(this).parent();
        jQuery(th).next(".stepsContent").slideToggle(500);
        return false;
    });

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

        if (collapsed == 0){
            $(contentAreas).hide("slide");
            collapsed =1;
            $(expandLink).text('Expand - all steps');
        } else {
            $(contentAreas).show("slide");
            collapsed = 0;
            $(expandLink).text('Collapse - all steps');
        }
        $(expandLink).closest(".stepsHeading .heading1").toggleClass("active");
        return false;
    });
});

Answer 3

You can use this

$(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    $(th).next(".phaseContent").slideToggle(500);
    $(".phaseContent1").hide();
    $(".phaseHeading").hide();
    return false;
});

Also do some changes in Div Class

<div class="Content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>