toggle - Expand and Collapse / Show More, Show Less -



toggle - Expand and Collapse / Show More, Show Less -

i have 3 paragraphs, each alternative "show more" if click "show more" link. each link clicked, should go , forth reading either "show more" or "show less".

i have set using .toggle(), not applying individual links. when click one, change. have alter read "show less," cannot go , forth between "show more" , "show less" after that.

the "hide" class set display:none in css btw.

i think getting close, help or advice on these lastly 2 issues appreciated:

html:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>expand/collapse</title> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="stylesheet" href="index.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <section id="jdom"> <h1>murach's javascript , dom scripting</h1> <h2>book description</h2> <div> <p>you can read other javascript books start finish , still not know how develop dynamic websites want to. that's because it's dom scripting lets things run slide shows, handle image rollovers, rotate headlines, provide animation, , more. , it's subject that's glossed on or ignored in other books.</p> </div> <div class="hide"> <p>but now, can go javascript beginner dom scripting expert in single book! fast-paced, professional, , packed expert practices, our new javascript book guides through each step larn how programme sites enhance user experience , ensure browser compatibility.</p> </div> <a href="#">show more</a> <h2>about author</h2> <div> <p>ray harris expert javascript programmer. obvious review 20 finish applications presents in book.</p> </div> <div class="hide"> <p>ray harris much more javascript programmer. has master's grade in computer science , artificial intelligence. worked on advanced research projects @ air forcefulness research lab while in usaf. taught info security , web development @ college of technology in raleigh, north carolina. in fact, ray has been programming , teaching since 12 years old.</p> <p>so when ray said wanted write us, didn't take long hire him. not did have technical skills looking for, previous writings showed had uncommon ability think, write, , teach.</p> </div> <a href="#">show more</a> <h2>who book for</h2> <div> <p>due our unique presentation methods , book's modular organization, right book web developer wants utilize javascript effectively.</p> </div> <div class="hide"> <p>here's partial list of can utilize book:</p> <ul> <li>web developers know html , css , ready master javascript.</li> <li>web developers programme in asp.net, jsp, or php on server side , want master client-side coding.</li> <li>web developers have read 3 or 4 javascript or dom scripting books still don't know how type of dom scripting that's required in real-world applications</li> </ul> </div> <a href="#">show more</a> </section> </body> </html>

subset_expansion.js:

$(document).ready(function(){ $("a").click(function(){ $(".hide").toggle(); $(this).text("show less"); }); });

you probaly solved now, if not think want right:

use trigger on 'a' , give id 'a' , 'div' like:

<a> : <a id="aid" onclick="functiona()">show more</a> <div> : <div id="adiv>

then create js this

function functiona() { document.getelementbyid('aid').innertext = document.getelementbyid('aid').innertext == "show more" ? "show less" : "show more" document.getelementbyid('adiv').style.display = document.getelementbyid('adiv').style.display == "block" ? "none" : "block" }

or can utilize if condition:

function functiona() { if(document.getbyid('aid').innertext = "show more") document.getelementbyid('aid').innertext = "show less" else document.getelementbyid('aid').innertext = "show more" ... }

toggle collapse expand

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more