Can you use a bulleted list inside haccordion

[njfrese]

1) Script Title: haccordion

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...haccordion.htm

3) Describe problem: Just wondering if it's possible to use a bulleted list inside the haccordion. I haven't been able to figure that one out.

[Deadweight]

Have you tried to use a bulleted list inside the function?

[djr33]

I don't see any fundamental reason it can't work. Just make sure it doesn't get too large. Try just a single item of a single word. If that works, then it's not an issue of format, but of size.

[njfrese]

I don't see any fundamental reason it can't work. Just make sure it doesn't get too large. Try just a single item of a single word. If that works, then it's not an issue of format, but of size.

When I use the <ul>, <li> stuff inside the accordion, it kinda blows things up. In the first panel of this document, here it is without bullets:

http://www.ccmg.com/demo/strategistPortfolios.asp

Add here is the same document using bullets, not working so good:

http://www.ccmg.com/demo/strategistPortfoliosBroken.asp

Not sure if there is a fix to this. If so, I haven't figured it out yet.

[GSimon]

When I use the <ul>, <li> stuff inside the accordion, it kinda blows things up. In the first panel of this document, here it is without bullets:

http://www.ccmg.com/demo/strategistPortfolios.asp

Add here is the same document using bullets, not working so good:

http://www.ccmg.com/demo/strategistPortfoliosBroken.asp

Not sure if there is a fix to this. If so, I haven't figured it out yet.

The problem is that the list is being styled (blown up as you put it) the same way your according list is.

This is because all your lists are in a div container with class="haccordion". In the CSS code (haccordion.css) you'll see the following

.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*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 558px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/

}

These lines are what is causing the new list to blow up.

So, you have a few options to fix this but it's definitely possible. I would change these CSS to this:

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

.accordionlistitem{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 558px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

and change your HTML code to this

<div id="hc1" class="haccordion" style="width: 870px; height: 700px; overflow: hidden;">
    <ul class="accordionlist">
         <li style="width: 685px; display: block;" class="accordionlistitem"></li>
	 <li class="accordionlistitem" style="width: 30px; display: block;">Content goes here, including any new lists you want to include</li>
 	 <li class="accordionlistitem" style="width: 30px; display: block;">Content goes here, including any new lists you want to include</li>
 	 <li class="accordionlistitem" style="width: 30px; display: block;">Content goes here, including any new lists you want to include</li>
 	 <li class="accordionlistitem" style="width: 30px; display: block; overflow: hidden;">Content goes here, including any new lists you want to include</li>
  	 <li class="accordionlistitem" style="width: 30px; display: block;">Content goes here, including any new lists you want to include</li>
         <li class="accordionlistitem" style="width: 30px; display: block; overflow: hidden;">Content goes here, including any new lists you want to include</li>
    </ul>
</div>

That should work, I haven't tried it out but I don't see what could go wrong since it's really just a CSS issue. So anyway what this does is it prevents any new unordered lists (<ul>) and any list items (<li>) from being blown up because the styles will only affect unordered lists with the class="accordionlist" and list items with the class="accordionlistitem". Any list or list item that does have those classes will simply go back to their default settings.

There are many approaches to solving this issue, in some ways my suggested code could be improved upon to be less cluttered. Btw nice site design!

[njfrese]

Well, no dice. I added those two classes and inserted the bulleted text as you suggested. Still blew up. I am at a loss on this one.

[njfrese]

Well, no dice. I added those two classes and inserted the bulleted text as you suggested. Still blew up. I am at a loss on this one.

Well, I shouldn't say it "blew up". I actually just cannot get actual bullets to appear. You'll see what I mean if you go here:

http://www.ccmg.com/demo/umaPortfolios.asp

and look at the tab furthest to the right. Any brilliant ideas?

[GSimon]

You added the classes to the wrong list. Those classes are intended for the main list and not for the one you added them in.

Have to think it through logically, the classes are adding the styling, and you don't want any styling on any new lists.

[njfrese]

You added the classes to the wrong list. Those classes are intended for the main list and not for the one you added them in.

Have to think it through logically, the classes are adding the styling, and you don't want any styling on any new lists.

Nice. Yes, this is a bit confusing. Will give it a crack and see if I can make it work. Thanks for your patience.