Custom horizontal Accordion using JQuery/JQuery UI - Width issue

StackOverflow https://stackoverflow.com/questions/9141597

Question

I've written a custom horizontal accordion using JQuery and JQuery UI. Previously I wrote vertical accordion using SlideUp and SlideDown and it worked perfectly well. In the sense, both of them got called simultaneously and so while one was sliding up (with its height reducing) the other one was sliding down (with its height increasing) and it was smooth.

But in horizontal accordion I have to slide left. So I use JQuery UI Toggle('slide') to do that. The two toggle functions are getting called simultaneously but the problem is that the WIDTH of the control is not reducing as it slides in. The width remains as it is since the full slide is completed and it is getting hidden suddenly.

Here is my code - 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Accordion</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">

        //temporary variables

        //append PCID at the end
        var currentOpenContent000;
        var pcid000 = '000';
        var time = 1000;
        var controlwidth = 600;
        var contentWidth = 400;
        var controlHeight = 400;

        $(document).ready(function () {
            autoScale();
            initializeControl();
            createEvents();
        });

        function autoScale() {
        }

        function setNormalsppheaderStyle(element) {
            $(element).css({
                'background-color': '#347235',
                'color': '#FFFFFF'
            });
        }

        function setHoversppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function setSelectedsppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function createEvents() {
            $('div[id*=header]').click(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;

                //hide old item
                setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
                $('#' + currentOpenContent000).toggle('slide');

                var cHeader = $(this).attr('id');
                var cContent = $(this).attr('id').replace('header', 'content');

                //show new item
                setSelectedsppheaderStyle($(this));
                $('#' + cContent).toggle('slide');
                currentOpenContent000 = cContent;

            });

            $('div[id*=header]').mouseover(function () {
                setHoversppheaderStyle($(this));
            });

            $('div[id*=header]').mouseout(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;
                setNormalsppheaderStyle($(this));
            });
        }

        function initializeControl() {
            var first = $('#' + pcid000 + 'content1');
            first.toggle('slide');
            currentOpenContent000 = pcid000 + 'content1';
            setSelectedsppheaderStyle($('#' + pcid000 + 'header1'));
        }
    </script>
</head>
<body>
    <div style="border: 1px solid red; padding: 1px; float: left" id="000outer">
        <table cellpadding="1" cellspacing="0" style="margin: 0; padding: 0">
            <tr>
                <!--Loop this content-->
                <td>
                    <div id="000header1" style="background-color: darkgreen; width: 30px; height: 396px;">
                    </div>
                </td>
                <td>
                    <div id="000content1" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header2" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content2" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header3" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content3" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header4" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content4" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

You can save this markup and run it and check it. Any ideas?

Était-ce utile?

La solution

Your markup was a bit strange, so I make little changes (I'm not an expert in CSS). Link to playground: http://jsfiddle.net/CoolEsh/8LNkG/6/

HTML:

<div style="border: 1px solid red; padding: 1px; float: left" id="outer">

    <div id="header1" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content1" style="background-color: silver; width: 0; height: 396px; float:left;">
    </div>
    <div id="header2" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content2" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header3" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content3" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header4" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content4" style="background-color: silver; height: 396px; float:left;">
    </div>

</div>

JS:

//temporary variables

//append PCID at the end
var currentOpenContent000;
var time = 1000;
var controlwidth = 600;
var contentWidth = 400;
var controlHeight = 400;

$(document).ready(function () {
    autoScale();
    initializeControl();
    createEvents();
});

function autoScale() {
}

function setNormalsppheaderStyle(element) {
    element.css({
        'background-color': '#347235',
        'color': '#FFFFFF'
    });
}

function setHoversppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function setSelectedsppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function createEvents() {
    $('div[id^="header"]').click(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;

        //hide old item
        setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
        $('#' + currentOpenContent000).animate( { width: '0' }, 500 );

        var cHeader = $(this).attr('id');
        var cContent = $(this).attr('id').replace('header', 'content');

        //show new item
        setSelectedsppheaderStyle($(this));
        $('#' + cContent).animate( { width: '400px' }, 500 );
        currentOpenContent000 = cContent;

    });

    $('div[id^="header"]').mouseover(function () {
        setHoversppheaderStyle($(this));
    });

    $('div[id^="header"]').mouseout(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;
        setNormalsppheaderStyle($(this));
    });
}

function initializeControl() {
    var first = $('#content1');
    first.show().animate( { width: '400px' }, 500 );
    currentOpenContent000 = 'content1';
    setSelectedsppheaderStyle($('#header1'));
}

Autres conseils

Since in IE the data in content boxes somehow overlaps I had to add the hide and show functions next to the animate instructions

$('#' + currentOpenContent000).hide('1000'); before: $('#' + currentOpenContent000).animate( { width: '0' }, 600 );

and

$('#' + cContent).show(); after: $('#' + cContent).animate( { width: '460px' }, 600 );

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top