function - jquery toggle() on DIV by hiding other div's -

-

i using following code toggle div clicking on block heading. need make respective div appear on click of respective block headings. div should toggle themselves.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">     { color:#c30; text-decoration:none; }     #banner { width: 930px; background-color:#666; height: 500px; }     #banner ul { list-style:none; padding: 40px; }     #banner ul li { margin: 10px 0 0 0; }     #banner ul li { display:inline-block; border:5px solid #fff; background-color:#fc9; padding:10px; font: bold italic 18px verdana; }     .slidercontent { border:5px solid #fff; background-color:#fc9; padding:10px; min-height: 150px; display:none; margin-top:5px; }     .slidercontent { padding:0 !important; border:none !important; }     .slidercontent a.closebutton { background:url(icon_modal_close.png) no-repeat 0 0; float:right; height:30px; width:30px; text-indent:-999px; } </style> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript">     $(document).ready(function() {         $('a.box').click(function(event){             event.preventdefault();             $(this).next('.slidercontent').toggle(function() {                 $('.slidercontent').not(this).hide();             });         });         $('.closebutton').click(function(){             $(this).parent().hide();         });     }); </script> </head> <body> <div id="banner">     <ul>         <li>             <a href="#" class="box">design</a>             <div class="slidercontent">                 <a class="closebutton" href="#">close</a>                 lorem ipsum doner             </div>         </li>         <li>             <a href="#" class="box">development</a>             <div class="slidercontent">                 <a class="closebutton" href="#">close</a>                 lorem ipsum doner             </div>         </li>         <li>             <a href="#" class="box">graphics</a>             <div class="slidercontent">                 <a class="closebutton" href="#">close</a>                 lorem ipsum doner             </div>         </li>     </ul> </div> </body> </html>

now problem div hide() function. toggle function executes first hide() function comes picture. makes layout distorted @ time 2 div shown on screen moment.

it should div hide first current div appear.

please me on same.

thanks lokesh yadav

try this:

$(document).ready(function() {         $('a.box').click(function(event){             event.preventdefault();             var slidercontent = $(this).next('.slidercontent');             $('.slidercontent').not(slidercontent).hide();             slidercontent.toggle();         });         $('.closebutton').click(function(){             $(this).parent().hide();         });     });

here jsfiddle : http://jsfiddle.net/jtssm/5/


Comments

Post a Comment

Popular posts from this blog

Javascript line number mapping -

-
magically formatted comments change reported line number of javascript errors in browsers; this: //@line n "f" n line number , f file name. unfortunately, //@line appears ungoogleable. know there documentation on feature, , browsers support it? (i found references here , here .) from can find available in mozilla based browsers. it using js_setoptions command can turn these options on or off depending on values passed. https://developer.mozilla.org/en/js_setoptions
Read more

c# - Is it possible to remove an existing registration from Autofac container builder? -

-
something along lines: builder.registertype<mytype>().as<itype>(); builder.registertype<mytype2>().as<itype>(); builder.deregistertype<mytype>().as<itype>() var container = builder.build(); var types = container.resolve<ienumerable<itype>>(); assert.istrue(types.count == 1); assert.istrue(types[0].gettype == typeof(mytype2)); scenario: go through bunch of assemblies , go register types want make sure have 1 implementation of given type. need before create container. track on own nice if autofac me bit. this cannot done directly using containerbuilder , unless start on new one. mind you, having first built container should able construct new container filtering away unwanted types , reusing registrations first container. this: ... var container = builder.build(); builder = new containerbuilder(); var components = container.componentregistry.registrations .where(cr => cr.activator.limittype != typ...
Read more

php - Mysql PK and FK char(36) vs int(10) -

-
i have read mysql can handle indexes , searches better if tables keys integers rather char(36) uuid's. is worth converting int(10)? note: use 1 server , have have plans use multiple databases concurrently therefore removing 1 of big reasons using uuid. our tables innodb if makes difference. thanks in advance. usually rdbms can handle integer keys pk more efficient, other datatypes. reason how build index column, yes: long dont require string (or other typed) keys, should use integers. however: char(36) , int(10) far away being equal, because int(10) much smaller, char(36). dont know, if require many different keys, should keep in mind. update, complete last paragraph: int(10) 32-bit, char(36) 36 - ^byte^ (= 288-bit). not mean, int consumes less space, means, char(36) has 4 times more different keys.
Read more