I am using an horizontal accordion from here:
<http://www.dynamicdrive.com/dynamicindex17/haccordion.htm>

I got it to display a full height but i'm having trouble with the width, it keeps either not working at all or generating a inline width of 500px on each list item, which I'm not sure where it is pulling it from. I tried to upload my code to JS Fiddle but i was having trouble :( Here's the code below:

**HTML:** <http://pastebin.com/4UuwJXSi>

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="redo.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../scripts/accordion.js">
        /***********************************************
        * Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * This notice MUST stay intact for legal use
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
        ***********************************************/
    </script>
    <script type="text/javascript">

haccordion.setup({
    accordionid: 'hc1', //main accordion div id
    paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
    selectedli: [0, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: false //<- No comma following very last setting!
})</script>
</head>
<body>
        <div id="hc1" class="haccordion">
            <ul>

            <li>
                <div class="hpanel">
                <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://www.fourseasons.com/images/generated/property/langkawi/landing_pages/basics_welcome.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
                </div>
            </li>

            </ul>
        </div>
</body>

```

**CSS:**

```
html, body
{
    height:100%;
    width: 100%;
}

*
{
    margin:0px;
    padding:0px
}

#hc1, #hc1 ul, #hc1 li
{
    height: 100%;
}

#hc1, #hc1 ul
{
    width: 100%;
}

li
{
    border: 1px solid black;
    height: 100%;
}

/* -- Start Accordion -- */
.haccordion{
    padding: 0;
}

.haccordion ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden; /*leave as is*/
}

.haccordion li{
    margin: 0;
    padding: 0;
    display: block; /*leave as is*/
    overflow: hidden; /*leave as is*/
    float: left; /*leave as is*/
}
/* -- End Accordion -- */

```

**Javascript:**

```
/ * Horizontal Accordion script * Created: Oct 27th,
2009.This notice must stay intact
for usage * Author: Dynamic Drive at http: //www.dynamicdrive.com/
* Visit http: //www.dynamicdrive.com/ for full source code
* /

var haccordion={
    / / customize loading message
if accordion markup is fetched via Ajax: ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',

accordioninfo: {},
//class that holds config information of each haccordion instance
expandli: function(accordionid, targetli) {
    var config = haccordion.accordioninfo[accordionid]
    var $targetli = (typeof targetli == "number") ? config.$targetlis.eq(targetli) : (typeof targetli == "string") ? jQuery('#' + targetli) : jQuery(targetli)
    if (typeof config.$lastexpanded != "undefined") //targetli may be an index, ID string, or DOM reference to LI
    config.$lastexpanded.stop().animate({
        width: config.paneldimensions.peekw
    }, config.speed) //contract last opened content
    $targetli.stop().animate({
        width: $targetli.data('hpaneloffsetw')
    }, config.speed) //expand current content
    config.$lastexpanded = $targetli
},

urlparamselect: function(accordionid) {
    var result = window.location.search.match(new RegExp(accordionid + "=(\\d+)", "i")) //check for "?accordionid=index" in URL
    if (result != null) result = parseInt(RegExp.$1) + "" //return value as string so 0 doesn't test for false
    return result //returns null or index, where index is the desired selected hcontent index
},

getCookie: function(Name) {
    var re = new RegExp(Name + "=[^;]+", "i") //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
    return document.cookie.match(re)[0].split("=")[1] //return its value
    return null
},

setCookie: function(name, value) {
    document.cookie = name + "=" + value + "; path=/"
},

loadexternal: function($, config) { //function to fetch external page containing the entire accordion content markup
    var $hcontainer = $('#' + config.ajaxsource.container).html(this.ajaxloadingmsg)
    $.ajax({
        url: config.ajaxsource.path,
        //path to external content
        async: true,
        error: function(ajaxrequest) {
            $hcontainer.html('Error fetching content.<br />Server Response: ' + ajaxrequest.responseText)
        },
        success: function(content) {
            $hcontainer.html(content)
            haccordion.init($, config)
        }
    })
},

init: function($, config) {
    haccordion.accordioninfo[config.accordionid] = config //cache config info for this accordion
    var $targetlis = $('#' + config.accordionid).find('ul:eq(0) > li') //find top level LIs
    config.$targetlis = $targetlis
    config.selectedli = config.selectedli || [] //set default selectedli option
    config.speed = config.speed || "normal" //set default speed
    $targetlis.each(function(i) {
        var $target = $(this).data('pos', i) //give each li an index #
        $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
        $target.click(function() {
            haccordion.expandli(config.accordionid, this)
            config.$lastexpanded = $(this)
        })
/*if (config.collapsecurrent){ //if previous content should be contracted when expanding current
                    $target.click(function(){
                        $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
                    })
                }*/
    }) //end $targetlis.each
    var selectedli = haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid)) ? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
    selectedli = parseInt(selectedli)
    if (selectedli >= 0 && selectedli < config.$targetlis.length) { //if selectedli index is within range
        config.$lastexpanded = $targetlis.eq(selectedli)
        config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
    }
    $(window).bind('unload', function() { //clean up and persist on page unload
        haccordion.uninit($, config)
    }) //end window.onunload
},

uninit: function($, config) {
    var $targetlis = config.$targetlis
    var expandedliindex = -1 //index of expanded content to remember (-1 indicates non)
    $targetlis.each(function() {
        var $target = $(this)
        $target.unbind()
        if ($target.width() == $target.data('hpaneloffsetw')) expandedliindex = $target.data('pos')
    })
    if (config.selectedli[1] == true) //enable persistence?
    haccordion.setCookie(config.accordionid, expandedliindex)
},

setup: function(config) {
    //Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only
    document.write('<style type="text/css">\n')
    document.write('#' + config.accordionid + ' li{width: ' + config.paneldimensions.peekw + ';\nheight: ' + config.paneldimensions.h + ';\n}\n')
    document.write('#' + config.accordionid + ' li .hpanel{width: ' + config.paneldimensions.fullw + ';\nheight: ' + config.paneldimensions.h + ';\n}\n')
    document.write('<\/style>')
    jQuery(document).ready(function($) { //on Dom load
        if (config.ajaxsource) //if config.ajaxsource option defined
        haccordion.loadexternal($, config)
        else haccordion.init($, config)
    }) //end DOM load
}

}

```

Any help on this would be great. In the end I want the open accordion to take up the users full screen no matter what resolution they're in. Here's the not working JSFiddle: <http://jsfiddle.net/HGh3V/>

**Note** I figured out that it is not taking the 100% for a width because of the peekw value having a pixel width. Is it taking a percentage of the peek width. How do I fix this?