[英]jquery javascript show/hide toggle issues
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. 1.我想从Java中删除阶段内容,以便在其中只包含StepsContent,因为我想扩展所有步骤。 2. when i click Step 1 first, and then click expand all, Step 1 collapses and expand all text issues. 2.当我先单击“步骤1”,然后单击“全部展开”时,“步骤1”将折叠并展开所有文本问题。 Any workaround. 任何解决方法。 Also if there is an easier way to do this through Css please let me know. 另外,如果有更简单的方法可以通过CSS执行此操作,请告诉我。
JSFIDDLE http://jsfiddle.net/Y3GYR/1/ 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 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>
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: 只需添加一个变量,然后将其放在当前的show \\ hide位置即可,如下所示:
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;
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.