Question

i have the following function written in javascript which operate a slide up/down box. but in firefox, it malfunctions. it just opens/closes once. after that no play.
i am getting the height() param from the box and storing it in hidden input. but firefox is unable to read the correct height of the box.

look at the code to understand better :

JS :

function boxCollapse() {
    $("#boxHeight").attr("value", parseInt($("#accTipsBox").height()));
    $("#accTipsBox").animate({height:'0px'});
    $(".btnCollapse").css({display:'none'});
    $(".btnExpand").css({display:'block'});
    $("#accTipsBox").css({padding:'0px'});
}

function boxExpand() {
    $("#accTipsBox").animate({height: $("#boxHeight").attr("value")});
    $(".btnExpand").css({display:'none'});
    $(".btnCollapse").css({display:'block'});
    $("#accTipsBox").css({padding:'0px'});
}

HTML :

<section class="accBox grey">
    <header>
        <div class="title">DISCLAIMERS</div>
        <a style="display: none;" class="btnExpand" href="javascript:void(0);"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
        <a style="display: block;" class="btnCollapse" href="javascript:void(0);"><img src="/resources/images/boxCollapseGrey.jpg" alt="button"></a>
    </header>
    <div id="accTipsBox" style="height: 125px; padding: 0px;">
        <input type="hidden" id="boxHeight" value="125">    
        <div class="accBoxContent">
            <div><p></p><p></p><p></p></div>
        </div>
    </div>
</section>

Answer 1

I think this is what you were going for:

//bind a `click` event handler to all the elements with the `btnExpandCollapse` class
$('.btnExpandCollapse').on('click', function (event) {

    //stop the default behavior of clicking the link (stop the browser from scrolling to the top of the page)
    event.preventDefault();

    //first select the parent of this element (`header` tag) and then get its sibling element that has the `accTipsBox` class, then take that element and slide it up or down depending on its current state
    $(this).parent().siblings('.accTipsBox').slideToggle(500);
});

With some slight tweaks to your HTML:

<section class="accBox grey">
    <header>
        <div class="title">DISCLAIMERS</div>

        <!-- Notice there is only one link now that does the job of both -->
        <a class="btnExpandCollapse" href="#"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
    </header>

    <!-- Notice I changed the ID attribute to CLASS so this code will work for repeated structure -->
    <div class="accTipsBox" style="height: 125px; padding: 0px;">  
        <div class="accBoxContent">
            <div>
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
        </div>
    </div>
</section>

Here is a demo: http://jsfiddle.net/VGN64/

Here is some documentation:

• .slideToggle(): http://api.jquery.com/slidetoggle
• .siblings(): http://api.jquery.com/siblings

On a side-note, if you want to store data about a DOM element, use jQuery’s $.data() method:

var $box = $("#accTipsBox");
$.data($box[0], 'height', $box.height());

You can then access this data like this

var height = $.data($('#accTipsBox')[0], 'height');

Notice that I appended [0] onto the end of the jQuery object to return just the DOM node associated with the object, this is required by the $.data() method: http://api.jquery.com/jquery.data. This is a very fast method of storing data associated with DOM elements.