I'm trying to create some horizontal jquery tab sliders, and being
somewhat new to jquery, I'm having a little trouble finishing off the
logic.
My current code snippet is here:
$(document).ready(function(){
$(".trigger").click(function(){
$(this).toggleClass("active");
$(this).parent().siblings().width(46).end().width(453).end();
$(this).next("div").show();
$(this).parent().siblings().find(".slidecontent").hide();
});
and the full code can be found at http://developer.erg.com/~bzaks/erg/test.html
What I'm going for is:
- Click on a bar link and it slides left exposing the content for that
panel, and meanwhile switching that bar to it's ON state (which is
just an image swap). Click on another bar, and the next piece is
exposed while the first is hidden.
Now this part works more or less ok.. the issues that I'm currently
having are:
1. Once a bar is clicked, if you click the same bar again, it's on/off
state should NOT change (which is currently is). In other words, the
little arrow on the bar selected should only be pointing right when
that panel is open, and pointing left (the OFF state) all other times.
2. I can't seem to get the widths of the panel content to fit
correctly, even though when I create the pages in static, they look
fine. (http://developer.erg.com/~bzaks/erg/u5.html,
http://developer.erg.com/~bzaks/erg/u6.html,
http://developer.erg.com/~bzaks/erg/u7.html)
Also, if there is any way to get an actual slide effect, rather just
the instantaneous width change (say with using .animate() maybe?),
that would be a bonus. But for now, I'd at least like to try to get
this part working properly.
Any help would be greatly appreciated. Thank you:)
-TurboRogue
