JQuery, javascript slideToggle()

Question

I'm trying to make a script that collapses and expands when you either press the text or the image. The images is a basic arrow, which is being replaced by an arrow pointing upwards when the div is expanded.

My problem is that the text disappears when I toggle the div. How should I write my code, so the headline would stay, no matter if the div is expanded or not? I would like to use the following script on several divs.

Furthermore the slideToggle() function does not work both ways, how do I solve this?

<script type="text/javascript">
        function toggle(divId, switchImgTag) {
            var ele = document.getElementById(divId);
            var imageEle = document.getElementById(switchImgTag);
            $("#" + divId).slideToggle("fast");
            if (ele.style.display == "block") {
                ele.style.display = "none";
                imageEle.innerHTML = '<img src="images/arrow_down.png">';
            }
            else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="images/arrow_up.png">';                    
            }
        }
    </script>

And the HTML:

<a id='imageDivLink' href="javascript:toggle('skills', 'imageDivLink');">
     <h2>Skills And Expertise</h2>
     <img class='arrow' src='images/arrow_down.png'>
</a>
<div id='skills' style='display:none;'>
     Lorem Ipsum...
</div>

Arun P Johny · Accepted Answer · 2013-08-16 10:47:56Z

2

Try

function toggle(divId, switchImgTag) {
    var ele = $("#" + divId);
    var imageEle = $('#' + switchImgTag).find('img');
    if (ele.is(':visible')) {
        imageEle.attr('src', "images/arrow_down.png");
    } else {
        imageEle.attr('src', "images/arrow_up.png");
    }
    $("#" + divId).slideToggle("fast");
}

Demo: Fiddle

answered Aug 16, 2013 at 10:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

zozo · Accepted Answer · 2013-08-16 10:49:32Z

First of all $("#" + divId).slideToggle("fast"); in your case is useless, since you do the toggle manually using simple jquery right after it. Read http://api.jquery.com/slideToggle/ and after you understand it you can just remove everything from that point on.

Also use the "complete" callback to add your "personal touches" at the end of animation.

Your function should look like this:

    function toggle(divId, switchImgTag) {
        var ele = document.getElementById(divId);
        var imageEle = document.getElementById(switchImgTag);
        $("#" + divId).slideToggle('fast', function() {
          // Change icon.
          // Change text.
        });
    }

About the text, you can change it the same way you currently change image.

Praveen · Accepted Answer · 2013-08-16 10:50:10Z

0

innerHTML replace the whole element(affects it child elements).

So work on the img tag like below

if (ele.style.display == "block") {
                ele.style.display = "none";
                $('.arrow').prop('src', 'images/arrow_down.png'); //change like

            }
            else {
                ele.style.display = "block";
                $('.arrow').prop('src', 'images/arrow_up.png');  //change like             
            }

answered Aug 16, 2013 at 10:50

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Comments

David Thomas · Accepted Answer · 2014-01-07 08:00:26Z

0

Problem is - you're using innerHTML it replaces all of your element HTML, to avoid it use append();

edited Jan 7, 2014 at 8:00

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Aug 16, 2013 at 10:45

Eternal1

5,6253 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

JQuery, javascript slideToggle()

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related