Javascript class switching on button with expanding div

Question

I have a website that has an expanding widget area in the topbar above the header. You can see this here: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

When clicking the arrow to expand this area, you can see that it switches to a different button that faces the opposite direction. When clicking it a second time to bring this area back up, the arrow doesn't switch back to it's original position.

I have tried many things pertaining to the class switching topic here at SO but I could not get any of it to work. Change an element's class with JavaScript

How do I best switch the class on this button from expand-arrow to collapse-arrow with the code I already have below? To that extent, should I simply drop the code below and use something easier/better?

CSS:

.collapse-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../../images/collapse-arrow.png');
}

.expand-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    background: url('../../../images/expand-arrow.png');
}

Javascript

<script language="javascript"><!-- THIS IS THE SLDING TOP BAR -->
    (function() {
      var open = false;     
      toggle = function() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        ele.style.height = (open ? 0 : ele.scrollHeight)+"px";
        document.getElementById("displayText").className = 
        document.getElementById("displayText").className.replace
        ( /(?:^|\s)expand-arrow(?!\S)/g , '' );                     
        open = !open;                   
      }
    })();   
    </script>

HTML:

Button:

<a class="expand-arrow" id="displayText" href="javascript:toggle();"></a>

When your page loads `#displayText` has two classes: `expand-arrow` and `collapse-arrow`. Your toggle function only removes the first class but has no way of ever adding it back. Have a look at the "check if a class is already applied" part of the answer you linked to. And use that to add the required class if necessary. — hsan, Feb 18 '13 at 15:47

score 1 · Accepted Answer · answered Feb 20 '13 at 19:38

1

All you need is just this:

<script language="javascript">

function toggle(){
    document.getElementById("displayText").classList.toggle('expand-arrow');
}

</script>

answered Feb 20 '13 at 19:38

Mayur Manani

795
4
12

1

I can see you have already implemented this in your website and it is working as expected. Thanks! – Mayur Manani Feb 21 '13 at 16:26

score 0 · Answer 2 · edited Feb 20 '13 at 19:43

0

Have you tried:

if (className indexOf("class1")){}

I suggest you use jQuery's .removeClass('class1'),.addClass('class2') for more readable, browser compliant code.

edited Feb 20 '13 at 19:43

Patricia

7,752
4
37
70

answered Feb 18 '13 at 16:01

Piyuesh

1,066
1
9
18

He's clearly not using jQuery based on his use of document.getElementById. I think the answer is even simpler: Use jQuery. .toggle, .addClass/removeClass, etc, there's a few different ways in jQuery. – James M Feb 20 '13 at 19:46
1

His website includes jQuery, and it is tagged in the question. Maybe he is just not familiar with it. – Danny Feb 20 '13 at 19:53

Javascript class switching on button with expanding div

2 Answers2