Accordion with horizontal nested

[Honky]

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.


<!-- 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

[jscheuer1]

Have you looked at:

http://www.dynamicdrive.com/dynamicindex17/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.

[Honky]

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

[jscheuer1]

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


<h3 class="horizontal_accordion_toggle"><br>Hi</h3>

And the width, which is currently set at 30px in the on page stylesheet:


.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?

[Honky]

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.

[jscheuer1]

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.

[Honky]

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.