jquery show slide bug -

Based on the button you click, the desired effect for the panel is to be changed. It works fine. Whatever problem I've seen is that what you click on the # button, the setting panel is the one that slides. I tried the global level and tried to store the previous panel, but it was not working at all. I believe the problem is in this line

  $ ("div # text div"). No ("#" + target). ("Slide", {direction: "right"}, 500);  

Thanks!

CSS

  #buttons {float: left;} #buttons ul {list-style-type: none; Cursor: indicator; Overflow: Hidden;} # Bootens Ul Lee {Height: 195px; Width: 40px; Float: left} #Buttons a {display: block; Height: 192 px; Width: 40px; Border: None; Cursor: indicator;} # bootens a.Settings: hover, #buttons a. Message: Hover, #Button A Points: Hover {Background-Position: -40px;;} # Buttons A.Titings {background: url (accountsettings.png}} #buttons a.messages {background: url (accountmessages.png}} #buttons a.payments { Background: url (accountpayments.png}} #buttons a.panel- selected {background-position: -40px 0;} #text {width: 550px; height: 199px; overflow: hidden; float: left;} div # Text Diva {width: 550px; height: 199px; float: left; margin-left: 20px;} div # text div h3 {font-family: Georgia, Garamond, serif, font-size: 1.8em; Color: # 092 A43; font-weight: light;} div # text div ul {list-style-type: none; float: left;} div # text div ul li {height: 195px; width: 175px; float: left; padding: 10px 0 0 0;} div # text div ul li p {font-size: 1.2mm; color: # 27608b; padding: 10px 0 0; line-height: 1.4m;} div # text div ul li a font -size: 1.6em; padding: 20px 0; 0 div = settings div {width: 120px; height: 140px; float: left;} div # message div {width: 120px; height: 140px; float: left;} Div # payments div {width: 120px; Height: 140px; Float: left;}  

HTML

  & lt; Div id = "button" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; One square = "setting" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "message" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "payment" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "text" & gt; & Lt; Div id = "settings" & gt; & Lt; H3 & gt; Account settings & lt; / H3 & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; P & gt; Test1 & lt; / P & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "message" & gt; & Lt; H3 & gt; Message & lt; / H3 & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; P & gt; Test2 & lt; / P & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "payment" & gt; & Lt; H3 & gt; Make Payment & lt; / H3 & gt; & Lt; Li & gt; & Lt; P & gt; Test3 & lt; / P & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

JQuery

  & lt; Script language = "javascript" type = "text / javascript" & gt; $ ("Div # text div: not (#settings)") Hide (); $ ("#button.teets"). AddClass ("panel-selected"); $ ("# Button li a"). Click (function () (if ($ (this) .hasClass ("panel-selected") == incorrect) {var target = $ (this) .attr ("class") $ ("# button li A: no RemoveClass ("panel-selected"); $ (this) .addClass ("panel-selected"); $ ("#" ("#" + target). ("Slide "," Direction "" left "}, 500); $ (" div # text div ") No. (" # "+ target). (" Slide ", {direction:" right "}, 500);}} ); & Lt; / script & gt;  

I think you are right Line:

  $ ("div # text div") No. ("#" + target). Solution ("slide", {direction: "right"}, 500);  

two points #Tecking is not a goal, which can cause problems. You might want to store the current div in a store to avoid that variable: