www.webdeveloper.com
Results 1 to 1 of 1

Thread: JQuery Accordion Hieght Problem

Hybrid View

  1. #1
    Join Date
    Jun 2010
    Location
    Sidcup, Kent
    Posts
    83

    JQuery Accordion Hieght Problem

    Hi All,

    I am having some problems with my jQuery Accordion. It contains a checkbox, a small image and a line of text enclosed in a paragraph tag.

    The issue I am having is that I am having to set a height for the UI Accordion in order to see the icons. If I dont set a height, then the Accordion starts to fail by just showing the top line, and even then half of it is missing.

    Here is my HTML:

    Code:
    <div class="ui-accordion" id="jQueryUIAccordion">
    
    
    <h3><a href="#">My Accordion</a></h3>
    
    <div>
        
    <ul class="badList">
         
    <li class="list1">
    
    <input class="accord1" value="layer1" id="check1" type="checkbox" />
    <img class="accord" src="img/blue/img1.png" width="33" height="37"></img> 
    <p class="list"> Transport 1</p>
    
    </li>
                    
    <li class="list2">
    	
    <input class="accord1" value="layer2" id="check2" type="checkbox"  />
    <img class="accord2" src="img/blue/img2.png" width="33" height="37"></img>  
    <p class="list"> Transport 2</p>
    
    </li>
                
    <li class="list3">
    <input class="accord1" value="layer1" id="check1" type="checkbox" />
    <img class="accord2" src="img/blue/img3.png" width="33" height="37"></img>  
    <p class="list"> Transport 3</p>
    </li>
                
    <li class="list4">
    
    <input class="accord1" value="layer1" id="check1" type="checkbox" />
    <img class="accord2" src="img/blue/img4.png" width="33" height="37"></img>  
    <p class="list"> Transport 4</p>
    
    </li> 
    
    <li class="list5">
    
    <input class="accord1" value="layer6" id="check6" type="checkbox"  />
    <img class="accord2" src="img/blue/img5.png" width="33" height="37"></img> 
    <p class="list"> Transport 5</p>
    
    </li>
                
    </ul>
    </div>
    
    
    <script type="text/javascript">
    jQuery("#jQueryUIAccordion").accordion({ 
    		event: "click",
    		collapsible: true,
    		autoHeight: true
    	});
    </script>
    Here is my CSS:

    Code:
    /* Layout helpers
    ----------------------------------*/
    .ui-helper-hidden {
    	display: none;
    	font-size: small;
    }
    .ui-helper-hidden-accessible {
    	position: absolute;
    	left: -1e+008;
    	font-size: small;
    }
    .ui-helper-reset {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	line-height: 1.3;
    	text-decoration: none;
    	font-size: small;
    	list-style: none;
    }
    .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    .ui-helper-clearfix { display: inline-block; }
    /* required comment for clearfix to work in Opera \*/
    * html .ui-helper-clearfix {
    	height: auto;
    }
    .ui-helper-clearfix {
    	display: block;
    	width: 250px;
    }
    /* end clearfix */
    .ui-helper-zfix {
    	width: 250px;
    	top: 0;
    	left: 0;
    	position: absolute;
    	opacity: 0;
    	filter: Alpha(Opacity=0);
    }
    
    
    /* Interaction Cues
    ----------------------------------*/
    .ui-state-disabled {
    	cursor: default !important;
    }
    
    
    
    /* Component containers
    ----------------------------------*/
    .ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; border: 2px solid #334A6F; margin: 0 20px 20px 0; background-color: #CCCCCC; }
    .ui-widget .ui-widget {
    	font-size: 1em;
    }
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    	font-family: Verdana, Arial, sans-serif;
    	font-size: 1em;
    	
    }
    .ui-widget-content a {
    	color: #334A6F;
    	width: 250px;
    	font-size: small;
    }
    .ui-widget-header a {
    	color: #334A6F;
    	width: 250px;
    	font-size: small;
    }
    
    /* Interaction states
    ----------------------------------*/
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    	border: 1px solid #334A6F;
    	font-weight: normal;
    	width: 250px;
    	font-size: small;
    	background-color: #001D4B;
    }
    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    	color: #e3e3e3;
    	text-decoration: none;
    	width: 250px;
    	font-size: small;
    }
    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    	border: 1px solid #334A6F;
    	font-weight: normal;
    	color: #ffffff;
    	width: 250px;
    	font-size: small;
    	background-color: #334A6F;
    }
    .ui-state-hover a, .ui-state-hover a:hover {
    	text-decoration: none;
    	width: 250px;
    	font-size: small;
    }
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    	border: 1px solid #cccccc;
    	background: #ffffff;
    	font-weight: normal;
    	color: #FFFFFF;
    	width: 250px;
    	font-size: small;
    }
    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    	color: #334A6F;
    	width: 250px;
    	font-size: small;
    }
    
    ----------------------------------*/
    .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
    .ui-accordion .ui-accordion-li-fix {
    
    }
    .ui-accordion .ui-accordion-header-active {
    	border-bottom: 0 !important;
    	background-color: #F00;
    }
    .ui-accordion .ui-accordion-header a {
    	display: block;
    	font-size: 1em;
    	padding: .5em .5em .5em .7em;
    	width: 250px;
    }
    /* IE7-/Win - Fix extra vertical space in lists */
    .ui-accordion a {
    	zoom: 1;
    }
    .ui-accordion .ui-accordion-header .ui-icon {
    	position: absolute;
    	left: 0.5em;
    	top: 50%;
    	margin-top: 24px;
    	background-color: #F00;
    }
    .ui-accordion .ui-accordion-content {
    	padding: 1em 1em;
    	border-top: 0;
    	margin-top: 1px;
    	position: relative;
    	top: 1px;
    	margin-bottom: 1px;
    	overflow: hidden;
    	display: none;
    	zoom: 1;
    	background-color: #F00;
    	
    }
    .ui-accordion .ui-accordion-content-active {
    	display: block;
    	background-color: #CCC;
    	height: 125px;
    }
    ----------------------------------*/
    
    ul.badList {
    	  list-style-type: none;
    	  padding-left:20px;
    	  float: left;
    }
    
    ul.badList1 {
    	  list-style-type: none;
    	  padding-left:20px;
    	  float: left;
    	  position:absolute;
    }
    
    LI.list1 { float: left; left: 5px; top: 1px;  height: 35px;line-height: 45px; list-style-position: outside; padding-left: 20px; position: absolute; width: 200px; }
       
    p.list { margin-left: 45px; margin-top: 6px; padding-bottom: 2px;}
    
    .accord1 { top:8px; left: 4px; position: absolute;}
    .accord2 { top:8px; left: 4px; position: absolute;}
    
    img.accord  { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; background-position: 0px 2px 0px 35px; margin-top: 2px; }
    img.accord2 { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; top: -3px; left: 20px; margin-top: 6px; }
    Can anyone see where I am going wrong?
    If anyone has any experience in this area please help!
    I have tried amending the height from auto to a certain height but I just want the lines to show that are in that section of Accordion.
    I have only shown part of the code, there are another 5 parts of the accordion that slide up and down.
    When I set a height, then that height is set for all parts of the Accordion. I do not want this. I want the height to be automatic so that the slide up or slide down displays all content within that particular slide if you know what I mean?

    Anyway, any help is greatly appreciated.

    Daz.
    Last edited by Primalscientist; 11-16-2012 at 05:28 AM. Reason: More information required

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles