jQuery slideToggle() Issues - Change display:block to display:inline-table?

Question

I'm using jQuery's slideToggle() function to control the expand/collapse feature of my website. Currently, I only have one page which has been developed upon before I implement it across the site; here it is .

By default, jQuery slideToggle() uses display="block" which isn't helping me. I'd like to make it use display="inline-table" instead when a panel is expanded, and revert back to display="none" when the same panel is collapsed.

There are a few settings I've applied to the CSS to make sure that the layout is how I want it to be:

.specs {
    width: 930px;
    height: 100px;
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

The height property is used to ensure that all of the icons within the panels are fully viewable. Removing this will cause smaller panels like 'Memory' to cut off half of the icon.

While collapsed, the panels are set to display="none" to make sure they don't affect the layout. However, upon expanding, they need to be set to display="inline-table" to bypass some alignment issues which you can currently see when looking at panels like 'Web Browsing' and 'Rear Camera' (basically, the lists overlap the DIVs below, and the inline-table setting fixes that).

As soon as I'm able to fix this issue, I can move on to implement this design into other pages.

PS - Currently in use, is Redsquare's method , so expanding is fine, but they don't want to collapse.

Thank you,
Dylan.

Answer 1

You don't have to use slideToggle() built-in function,create function of your own.

Use .toggleClass() : http://api.jquery.com/toggleClass/

Something like this:

css:

.DisplayNone{
   display: none;
}

.DisplayInlineTable{
   display: inline-table;
}

then create onclick event:

jquery:

$(parent).click(function(){
   $(child).toggleClass("DisplayInlineTable").slideToggle();
});

Answer 2

This seems to work for me. Use min-height instead of height

.specs {
    width: 930px;
    /*min-height: 100px; CHECK UPDATE */
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

UPDATE: See it in action at http://jsfiddle.net/LLQyV/1/

Try this. Remove min-height from the CSS.

In your HTML enclose each spec in a div classed as toggleContainer like so (I duplicated your general category and added various specs to each one.)

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
    </ul>
</div>
</div>

Then in your JS file do this (I combined all your onclick='toggle' calls into this)

$(function() {
    $(".toggleContainer").each(function() {
        //store the .specs height to an unchanging attribute
        $(this).find(".specs").attr("specHeight", $(this).find(".specs").height());

        //when the cat is clicked, expand or collapse the spec
        $(this).find(".spec-cat-content").click(function(e) {
            e.preventDefault();
            //find spec for current toggleContainer that contains this category toggle button
            var spec = $(this).parent().parent().find(".specs");

            //check to see if the spec is displayed.
            if ($(spec).css("display") == "none") {
                //if it isn't then animate to specHeight attr and display block                $(spec).height(0);
                $(spec).css("display","block");
                var newHeight=$(spec).attr("specHeight");
                if(newHeight<100)
                    newHeight=100;
                $(spec).animate({height:newHeight},400);
            }
            else {
                //if it is, then animate to 0 height, and display:none
                $(spec).animate({height:0},400,function(){$(spec).css("display","none");});

            }
        });
    });
});​