Tuesday 15 February 2011

html - How can I toggle showing these two elements with jQuery? -


Therefore, I give a specific design for a special task for a particular idea, if someone This issue can help solve. I read some posts to hide an element, while other appearances I do not have much experience on jQuery, so I apologize in advance. What I found was that you can make both calls simultaneously, or you can use the second column as a callback. I'm actually looking for something that will toggle the performance of two with a normal fade. I am aware of this that I do not want to move the triangle, it should be as if the text is just changing within the triangle. But what I have to do is not effective. I have to hide the second triangle on page load, but I can not get it, and I can not even get the triangle to hide on click, I am demanding a quick improvement for this issue. thank you in advanced.

Here's HTML:

  & lt; Div class = "buttons" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "button 1" & gt; & Lt; P & gt; 1 & lt; / P & gt; & Lt; / Div & gt; & Lt; Div square = "button 2" & gt; & Lt; P & gt; 2 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

with jQuery function:

  $ (window) .load (function () {$ ('. Button2'). Hide ();} ); $ ('. Button1'). Click (function () {$ ('.button1'). Hide (); $ ('.button2'). Show ();}); $ ('. Button2') Click (function () {$ ('. Button2'). Hide (); $ ('. Button1'). Show ();});   

A bit of CSS:

  .buttons {width: 100%; } .buttons .container {text-align: center; } .button1, .button2 {display: inline-block; Width: 0; Height: 0; Border-left: 40px solid transparent; Border-right: 40px solid transparent; Border-top: 40px solid # cc 20000; Cursor: hand; Cursor: indicator; } .button1p, .button2p {status: absolute; Color: # f9f9f9; Z-index: 9999; Margin top: -30px; Margin-left: -2px; Font-size: 7px; }   

And this is the one if anyone would want to change anything.

Use the jquery method:

 < Code> $ ('.button1, .button2'). Click (function () {$ ('. Button1, .button2'). Toggle ();});    

No comments:

Post a Comment