Home/ Questions/Q 8013991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:47:47+00:00

I have a menu built using divs, each section is composed by 2 divs

  • 0

I have a menu built using divs, each section is composed by 2 divs (Title and content). The content is collapsed or expanded when the title is clicked, but on IE8 the space between the section divs is shrinking after expanding and collapsing a section.IE9, Chrome, and Firefox display everything correctly

This is how it looks, the first section is displaying correctly with the space below it, but on the rest the space is shrinked

The weird thing is if I resize the window, everything looks fine again

This is a sample of the code I’m using, and this is the jsfiddle

I hope somebody have solved the same issue. Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this code:

    There is an explanation of the problem here :

    http://jqueryfordesigners.com/animation-jump-quick-tip/

    Effectively, wrap each pair of title and content elements in a containing div, and then apply your padding to the bottom of that. Tested in IE7, IE8, FF, & Chrome 

     <!doctype html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".menu-section-content").hide();
        $(".menu-section-title").click(function() {
            var theHeight = $(this).height();
            $(this).css('height', theHeight);
            $(this).next(".menu-section-content").slideToggle(600);
            $(this).toggleClass('collapse');
        });
    });
    </script>

    <style>
        div.menu-section-content
        {
            border: 1px solid #777;
            border-top: none;
            padding: 10px;
            margin-left: 5px;
            background-color: #ffffff;
        }
        div.menu-section-title
        {
            font-size: 100%;
            border: solid 1px #777777; /*border-radius: 5px 0px 0 0;*/
            background-color: #A9C3C4;
            color: #fff;
            font-weight: 500;
            margin-left: 5px;
            cursor: pointer;
            clear: both;
            padding: 5px;


        }
        .expand
        {
            background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/1a/Silk_bullet_arrow_up.png');
            background-repeat: no-repeat;
            background-position: right center;
        }
        .collapse
        {
            background-image: url('http://souper-spices.com/wp-content/themes/shopperpress/template_shopperpress/images/langs/arrow.png');
            background-repeat: no-repeat;
            background-position: right center;
        }

        .container {
            padding-bottom: 10px;
        }

    </style>
    </head>

    <body>
    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>

    </div>

    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    <div class="container">
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    <div class="container"> 
    <div class="menu-section-title expand">
    title
    </div>

    <div class="menu-section-content">
        options
    </div>
    </div>

    </body>
</html>
    • 0