Question

So I have some function that expand and collaps based on hover and click. The function works fine on the basic test but it’s not working on the site. When a user clicks on the Expand A and Expand B. The outer container expands with it as you can test it in jsFiddle . But when the same code is applied to the main site the outer container doesn’t expand with the expanded div. Instead it has the expanded div if it’s too long. What am I missing here?

Thanks in advance. Rex

P.S. I can’t use the newer version of jQuery or the change the layout. That’s the CMS is set up. However I can change the css properties and the javascript functions.

The jQuery script works fine on the test version: http://jsfiddle.net/rexonms/pXm62/

But it doesn’t work on the site: http://boston.staging.ujcweb.org/expandable-box.aspx

Answer 1

There is a function named adjustLayout in your http://boston.staging.ujcweb.org/js/globalPage.js file which sets height of div#ctl00_ContentPlaceHolder1_supportingElements dynamically. Therefore your boxes can’t push container.

You can try this; Change the toggle function at bottom of your http://boston.staging.ujcweb.org/local_includes/top-nav.js script to this:

$("a.trigger").click(function() {
    var $this = $(this),
        $container = $('#ctl00_ContentPlaceHolder1_supportingElements');
    if($this.hasClass('active')) {
        $container.height($container.data('height'));
    }
    else {
        $container.data('height', $container.height()).css('height', 'auto');
    }
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});