0

I have the following over-complicated legacy code that I have to fix. My problem is using the jQuery code snippet below both instances of the minus_sign / plus_sign toggle. What I want is only the one to change if sub_items are display:block. If someone can help me I'd be very grateful. Hopefully this makes sense.

HTML

<li data-id="02" class="nav__module nav__chapter-02">
    <div class="nav__module-heading" role="heading" aria-level="2">
        <a id="headLnk_02" class="trigger_02 chapter_link" href="../content/m01/m01_c02_p00.html">
            <span class="nav__module-heading-number">Module 2</span>
            <span class="nav__module-heading-title menu_ch02">Dashboards</span>
        </a>
        <a tabindex="-1" aria-hidden="true" class="expand_collapse" href="#">
            <span class="fa fa-chevron-down"></span>
            <span class="chapter_expand">Expand</span>
        </a>
    </div>    
    <ul aria-labelledby="headLnk_02" class="nav__items">
        <li class="sub_p01">            
            <span aria-hidden="true">
            <span class="exp plus_sign plus01"><span class="offThePage">plus/minus</span></span>
            <span class="exp minus_sign minus01"><span class="offThePage">plus/minus</span></span>
            </span>

            <a id="subLnk_01" class="parent_link menu_p01" href="../content/m01/m01_c02_p01.html">Publishing dashboard</a>

            <ul aria-labelledby="subLnk_01" class="sub_items">
                <li><a href="../content/m01/m01_c02_p01-a.html" class="menu_p01a" >Publishing process</a></li>
                <li><a href="../content/m01/m01_c02_p01-b.html" class="menu_p01b" >When to use the<br/>Publishing dashboard</a></li>
                <li><a href="../content/m01/m01_c02_p01-c.html" class="menu_p01c" > Approving multiple items</a></li>
            </ul>
        </li>
        <li class="sub_p04">            
            <span aria-hidden="true">
            <span class="exp plus_sign plus04"><span class="offThePage">plus/minus</span></span>
            <span class="exp minus_sign minus04"><span class="offThePage">plus/minus</span></span>
            </span>
            <a id="subLnk_04" class="parent_link menu_p04" href="../content/m01/m01_c02_p04.html">Control panel</a>
            <ul aria-labelledby="subLnk_04" class="sub_items">
                <li><a href="../content/m01/m01_c02_p04-a.html" class="menu_p04a">Site configuration</a></li>
            </ul>
        </li>
    </ul>
</li>

jQuery

$( ".sub_items:hidden").attr( "aria-hidden", "true" );
$( ".sub_items:visible").attr( "aria-hidden", "false" );

if($('.sub_items').is(':visible'))
{
    $('.minus_sign').show();
    $('.plus_sign').hide();
}
code4pi
  • 185
  • 1
  • 7
Laurence L
  • 613
  • 1
  • 8
  • 21
  • There is no sub_items with `display:block`. can you explain a bit more? You can get the inline-style like this though : `$('.yourclass').attr('style').split(';');` – Amin Gharavi May 17 '16 at 01:59
  • Thanks.
      – Laurence L May 17 '16 at 02:01
    • I did not add the css for the display block in the post. I'll add that shortly. Handy piece of code you posted thanks Gharavi – Laurence L May 17 '16 at 02:03
    • Sample CSS .sub_items{ display: none; } /* Chapter 1 */ .m01.c02.p01 .sub_p01 .sub_items, .m01.c02.p01a .sub_p01 .sub_items, .m01.c02.p01b .sub_p01 .sub_items, .m01.c02.p01c .sub_p01 .sub_items, .m01.c02.p01d .sub_p01 .sub_items, .m01.c02.p04 .sub_p04 .sub_items, .m01.c02.p04a .sub_p04 .sub_items { display: block; } – Laurence L May 17 '16 at 02:07
    • sorry i cant help you, you need to put more of your code here. you can use [this condition](http://stackoverflow.com/a/2083162/3591300) to run your code. if you want to run it on every div you can try something like : `$('.sub_items').each(function(){ });` – Amin Gharavi May 17 '16 at 02:25
    • Thanks Amin. I'll see if I can get it working using your advise. If not I'll add to the code posted. I appreciate your time :-) – Laurence L May 17 '16 at 02:27

    0 Answers0