Advanced Search

Results 1 to 7 of 7

Thread: Accordion with horizontal nested

  1. #1
    Join Date
    Sep 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Accordion with horizontal nested

    Hello, I am working on a Page which has just to much Content. Thats why i am looking for a Content Accordion with nested Horizontal with a posibility to add Topics.

    Almost all the Code looks like that atm.

    HTML Code:
    <!-- BNC Regeln -->
    		<a name="regeln"><h3>Regeln</h3></a>
    				<ol>
    					<li class="shortRules" style="font-size: 12pt; font-weight: bold">Q-Auth</li>
    
    					<p>Du musst bei Q geauthed sein. Infos findest Du unter <a href="http://www.quakenet.org/help/q-commands/auth" target="_blank" class="externalLink">quakenet.org</a>.</p>
    					<p style="color: #009900">Q Accounts (Q-Auth) die erst vor kurzem erstellt wurden, können keinen BNC requesten.<br>
    					Eine Request ist <b><u>erst</u></b> nach einigen Tagen möglich.</p>
    					<li style="font-size: 12pt; font-weight: bold">Eggdrops</li>
    					<p>Keine BNCs für Eggdrops.</p>
    					<li style="font-size: 12pt; font-weight: bold">SPAM/K-/G-Line.</li>
    					<p>Verhindere SPAM/K-Line/G-Line.</p>
    					<li style="font-size: 12pt; font-weight: bold">#brainlag Channel</li>
    					<p>Bleib mit deinem BNC in #brainlag.</p>
    					<li style="font-size: 12pt; font-weight: bold">Nur echte User</li>
    					<p>Keine BNCs um Deinen Clan- und/oder Channelnamen wiederzugeben. BNCs sind nur für echte User.</p>
    					<li style="font-size: 12pt; font-weight: bold">1 BNC pro User</li>			
    					<p>Hast Du bereits einen BNC bei einem anderen Anbieter, bekommst Du keinen mehr von uns.</p>
    					<li style="font-size: 12pt; font-weight: bold">Netzwerk Regeln</li>
    					<p>Halte Dich an die Netzwerk (Quakenet) und Channel (#brainlag) Regeln.<br>Detaillierte Infos findest Du unter <a href="http://www.quakenet.org/faq/faq.php?c=1" target="_blank" class="externalLink">quakenet.org/Main-Rules</a>.</p>
    					<li style="font-size: 12pt; font-weight: bold">Nicht genutzte BNCs</li>
    					<p>BNCs werden automatisch, nach <b><u>4 Wochen Nichtnutzung</b></u>, vom System gelöscht.<br><br><span style="color: #009900">Längere Offlinezeiten (Krankheit, Urlaub etc.) sollten dem brainlag Team, mit Grund und Zeitangabe, mitgeteilt werden.<br>Der BNC wird dann für den angegebenen Zeitraum vor dem automatischen Löschen geschützen.</span><br><br>
    					<span style="color: #ff6600">Sollte niemand vom brainlag Team im IRC online sein, schreib uns im <a href="http://www.brainlag.eu/forum/#support.210" target="_blank" class="externalLink">Support Forum</a>.</span><br><br>
    					<h6 style="color: #CC3300"> Hast Du deine BNC Daten erhalten, verbinde dich innerhalb von 24h einmal mit deinem BNC, da dieser sonst als Idle BNC erkannt und automatisch gelöscht wird.</h6></p>
    				</ol><br />
    <center><h6 style="color: #FF0000; text-shadow: 0px 2px 2px rgba(150, 150, 150, 0.76);">Bei wiederholtem Verstoß gegen die Regeln werden BNCs, ohne Vorankündigung, gelöscht.</h6></center><br />
    		<div class="floatright"><a href="{$requestPaths.requestUri}#top">&uarr; TOP</a></div>
    <h3> are Title Tags for vertical sliding, while all inside <ol> should be horizontal and all inside the <li> Tag is Topic for horizontal nested.

    I hope to find someone who can help me with that. Thanks a lot

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Have you looked at:

    http://www.dynamicdrive.com/dynamici...haccordion.htm

    It can probably be nested as long as it's not initially display: none;

    Like if it's position: absolute; visibility: hidden; instead of display: none; - then it should have the ability to set itself up properly.

    Then again, if it's not initialized until the first time it's displayed - then it could perhaps start out display: none;

    Try it out with a just one vertical with just one nested horizontal. If you have problems with it, give me a link to it and I'll see what I can do to get it working.
    Last edited by jscheuer1; 07-20-2013 at 03:59 AM. Reason: thought about nesting/display issues
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello, thanks for your reply.
    I have found this Example http://www.p51labs.com/accordion/ - See example 3 which is almost what i am looking for, only the horizontal nested Slider has no Topic which i need.

    I am not that good in Coding, so if any is willing to do a Code which fits the the Code Tags in the first Thread i would also pay for it.
    Would be great to have a responsive design possibility.

    Thanks a lot

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    You just have to edit the markup to put a topic in there (addition highlighted):

    Code:
    <h3 class="horizontal_accordion_toggle"><br>Hi</h3>
    And the width, which is currently set at 30px in the on page stylesheet:

    Code:
    		.horizontal_accordion_toggle {
    			/* REQUIRED */
    			float: left;	/* This make sure it stays horizontal */
    			/* REQUIRED */
    
    			display: block;
    			height: 100px;
    			width: 30px;
    			background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
    			color: #ffffff;
    			text-decoration: none;
    			outline: none;
    			border-right: 1px solid #cde99f;
    			cursor: pointer;
    			margin: 0 0 0 0;
    		}
    Would have to be set wide enough to accommodate the text. But you would really have more flexibility with a nested vertical accordion. Is there any reason why you couldn't use that instead?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Honky (07-21-2013)

  6. #5
    Join Date
    Sep 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello jscheuer1.
    I tried a lot of the Accordions and not sure anymore what was the Problem, guess it was something with the h and li tags.
    I will try it with your Help again to see if i can get it working.

    Thank you for your Help.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,683
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    If you still want to pay someone to do it for you, I charge $50.00 an hour and think it could take me between 2 and 4 hours to do it.

    But if you're willing to take your best shot at setting it up and put up a live demo of that, if it just needs a little tweaking, we do that for free here.

    Alternatively, if you want someone to do it for you and you think $100 to $200 is too high, you can post in the general paid requests section and see if anyone else takes it on for less.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Sep 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Well at the end i decided to choose some different Animation, which gives me more flexibility with responisve Design too, but also getting in trouble with a 2 columns CSS design.
    Well, coding is quite hard if you dont know a lot about it.

Similar Threads

  1. Bullet List Accordion Menu with 4 nested levels
    By dianacastillo in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-10-2011, 05:50 PM
  2. Accordion Menu-nested list
    By blackberg in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 09-28-2009, 06:55 PM
  3. Accordion Menu, additional nested items
    By magsuk in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-14-2009, 09:14 AM
  4. Second level of nested accordion doesn't work
    By ConklinWeb in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-28-2009, 10:09 PM
  5. Bullet List Accordion Menu with nested levels
    By desk2web in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-14-2008, 09:47 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
  •