JQuery Help

I was able to put a table at the header that serves as the announcement and content container.


The function will be it contains links that will direct you to the latest announcements, news, photos, vids, subbed vids & translations. However, I was only able to succeed in linking for the first tab (announcements) because when I put links for the other tabs, everything disappears.

What should I do? (The codes below)

Code:

$(document).ready(function() {
$('#logo').after('<div class="TabbedPanels" id="TabbedPanels1"><ul class="TabbedPanelsTabGroup"><li class="TabbedPanelsTab">ANNOUNCEMENTS</li><li class="TabbedPanelsTab">NEWS</li><li class="TabbedPanelsTab">PHOTOS</li><li class="TabbedPanelsTab">VIDEOS</li><li class="TabbedPanelsTab">JWSUBS</li><li class="TabbedPanelsTab">TRANSLATIONS</li></ul>

<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t155-hiring-jiyeon-worldwide-staff#164"> Jiyeon Worldwide Staff</a></p>
<p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t454-hiring-jwsubs-staff#733"> JWSubs Staff</a></p>
<p style="text-align: left; ">[SUPPORT] <a href="http://www.jiyeonworldwide.com/t764-petition-verify-jiyeon-s-twitter-account#1774"> Verify @pjy1234 Account</a></p>
<p style="text-align: left; ">[DONATE] <a href="http://www.jiyeonworldwide.com/t204-forum-operation-and-donations"> Forum Operations </a></p></span></span></span></div>

<div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[04.10] <a href="http://www.jiyeonworldwide.com/t751-t-ara-jiyeon-s-bare-face-even-the-eyeliner-s-gone"> Jiyeon's Bare Face  - "Even Eyeliner's Gone" </a></p>
<p style="text-align: left; ">[04.09] <a href="http://www.jiyeonworldwide.com/t744-jiyeon-s-love-to-fans-a-beautiful-face-and-mind"> Jiyeon's Love To Fans - "Beautiful Face and Mind" </a></p>
<p style="text-align: left; ">[04.01] <a href="http://www.jiyeonworldwide.com/t697-t-ara-s-jiyeon-cute-expression-with-a-cape-strangely-sexy"> Jiyeon's Cute Expression With A Cape - "Strangely Sexy"</a>
<p style="text-align: left; ">[03.29] <a href="http://www.jiyeonworldwide.com/t677-jiyeon-s-selcas-getting-prettier-each-day">Jiyeon's Selcas Getting Prettier Each Day </a></p></p></span></span></span>
</div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t772-scan-jiyeon-for-sparkle-updated">Jiyeon For Sparkle </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t771-cytw-bae-yun-jeong-twitter-update-ft-jiyeon-at-milan">Bae Yun Jung Twitter Update ft. Jiyeon </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t768-fantaken-jiyeon-with-fans-at-milan">Jiyeon With Fans At Milan </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t770-official-ads-jiyeon-for-g-market">Jiyeon For G-Market </a></p></span></span></span>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t733-bts-t-ara-for-wild-roses-endorsement"> T-ara Wild Roses CF</a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t699-mv-roly-poly-japanese-mv-jiyeon-s-version"> Roly Poly Japanese MV - Jiyeon's Version </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t694-ranks-haru-haru-ranks-31-on-billboard-korea"> Haru Haru Ranks 31 On Billboard Korea </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t688-bts-jiyeon-tony-moly-cf-bts">Jiyeon Tony Moly CF </a></p></span></span></span></div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t758-drama-dream-high-2-episode-16eng-subbed"> Dream High 2 - Ep 16</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t757-drama-dream-high-2-episode-15-eng-subbed"> Dream High 2 - Ep 15</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t756-drama-dream-high-2-episode-14-eng-subbed"> Dream High 2 - Ep 14</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t754-drama-dream-high-2-episode-13-eng-subbed"> Dream High 2 - Ep 13</a></p></span></span></span></div>

<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[2012.04.13]<a href="http://www.jiyeonworldwide.com/t773-trans-2012-04-13">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.12]<a href="http://www.jiyeonworldwide.com/t767-trans-2012-04-12">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.11]<a href="http://www.jiyeonworldwide.com/t760-trans-2012-04-11">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.09]<a href="http://www.jiyeonworldwide.com/t743-trans-2012-04-09">Jiyeon Twitter Update </a></p></span></span></span></div></div></div>');
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
});

Is there something wrong with my codes or the jquery itself?

Forum add: http://www.jiyeonworldwide.com/
Version: Invision

Idk how to help you with that but you can use this one http://css-tricks.com/organic-tabs/ is what i use on my forum and is easy to use it.

The HTML should be all one long string and have no line breaks in.

@Matti How should I do it? Because the tabs should be in my banner ^^ Thanks

@LGForum Ah.. what should I erase on my codes? Thanks

Glazella wrote:@Matti How should I do it? Because the tabs should be in my banner ^^ Thanks

You mean the Homepage message?

Ah no~ It's not a homepage message Visit my forum so you can see where it is positioned: http://jiyeonworldwide.com

All the line breaks need to be taken out so the HTML is all on one string.

Its not necessary to insert the HTML with Javascript though.

LGforum wrote:All the line breaks need to be taken out so the HTML is all on one string.

Its not necessary to insert the HTML with Javascript though.

So how should the codes go?

bump ^^