CODEWITHSUNDEEP
jqueryhtml
twigg
twigg

Reputation: 3993

jQuery change a div ID on click

I have a div which is hidden when a link is clicked (the link is actually an image) the hidden div displays. I then have a link in the hidden div to 'hide' that div again. What I want to try and achieve is the original image/link 'toggles' allowing the user to use that image to open and close the div. My code so far is as follows:

        <script type="text/javascript" language="JavaScript">
        function controlFooterIcons(v){
            if(v==1) $("#rpacks_admin").show(50);
            else $("#rpacks_admin").hide(50);
        }

        function toggleIcons(v){
            if (v==1) $('#show_rpack').attr("id", "hide_rpack");
        }

        $(document).ready(function(){
                $("#show_rpack").click(function(){
                    event.preventDefault();
                    controlFooterIcons(1);
                    toggleIcons(1);
                });
                $("#hide_rpack").click(function(){
                    event.preventDefault();
                    controlFooterIcons(0);                      
                });
        });
        </script>

and the HTML/PHP

<div id="rpacks_admin" style="display: none;">
<h5>Hello</h5>
<a href="#" id="hide_rpack">Close</a>

and the link that should 'toggle'

<a href='#' id='show_rpack'><img class='footericon'src='$BASE_URL/images/icons/recoverydisc.png' /></a>"

Upvotes: 0

Views: 131

Answers (1)

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

How about this:

$("#show_rpack").click(function(event) { 
    event.preventDefault();

    var theDiv = $("#rpacks_admin");
    if (theDiv.is(":visible")) { 
        theDiv.hide(50);
    }
    else { 
        theDiv.show(50);
    }
});

Upvotes: 1

Related Questions