Advanced Search

Results 1 to 9 of 9

Thread: Can you use a bulleted list inside haccordion

  1. #1
    Join Date
    Nov 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can you use a bulleted list inside haccordion

    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.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    275
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    Have you tried to use a bulleted list inside the function?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    261
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Nov 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default No such luck

    Quote Originally Posted by djr33 View Post
    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.

  5. #5
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by njfrese View Post
    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

    Code:
    .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:

    Code:
    .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

    Code:
    <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!
    Last edited by GSimon; 11-15-2013 at 07:58 AM.

  6. #6
    Join Date
    Nov 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default No such luck

    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.

  7. #7
    Join Date
    Nov 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Addendum

    Quote Originally Posted by njfrese View Post
    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?

  8. #8
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    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.

  9. #9
    Join Date
    Nov 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Nice

    Quote Originally Posted by GSimon View Post
    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.

Similar Threads

  1. Haccordion text
    By marctje in forum CSS
    Replies: 1
    Last Post: 11-04-2012, 07:55 AM
  2. toggling haccordion visibility
    By bryno in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-09-2010, 08:08 AM
  3. how to modify haccordion
    By lordrt in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-03-2010, 12:47 PM
  4. Expandall/Contractall needed for bulleted accordion list
    By Essbee in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 06-16-2010, 03:54 PM

Bookmarks

Posting Permissions

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