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

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