Expanding or collapsing text using jQuery
Question
I am trying to learn how to use jQuery to expand/collapse text on a webpage but am not sure how to this by using the "a href" links? I'd like the user to expand or collapse text by clicking on the "Show more" links. I know that you have to add or remove the 'hide' class to do this but how exactly would I use the toggle class to achieve this?
* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; padding: 15px 25px; border: 3px solid blue; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; } a, a:focus, a:hover { color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <main id="jdom"> <h1>Expanding and Collapsing messages</h1> <h2>Message 1</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>Hello!</p> </div> <a href="#">Show more</a> <h2>Message 2</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>BOOP</p> </div> <a href="#">Show more</a> <h2>Message 3</h2> <div> <p>Click the link below to expance this message</p> </div> <div class="hide"> <p>Things to do when you're bored</p> <ul> <li>Go for a walk</li> <li>Try your hand at painting.</li> <li>Listen to music</li> </ul> </div> <a href="#">Show more</a> </main> </body> </html>
5 answers
solution1
0 2017-04-21 05:16:19
Try the below snippet. Tweak to your requirements. I added a data-show attribute tag and then in onclick called a function and pass the data to toggle.
* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; padding: 15px 25px; border: 3px solid blue; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; } a, a:focus, a:hover { color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <main id="jdom"> <h1>Expanding and Collapsing messages</h1> <h2>Message 1</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide" data-show="link"> <p>Hello!</p> </div> <a href="#" onclick='$("[data-show=link]").toggle()'>Show more</a> <h2>Message 2</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>BOOP</p> </div> <a href="#">Show more</a> <h2>Message 3</h2> <div> <p>Click the link below to expance this message</p> </div> <div class="hide"> <p>Things to do when you're bored</p> <ul> <li>Go for a walk</li> <li>Try your hand at painting.</li> <li>Listen to music</li> </ul> </div> <a href="#">Show more</a> </main> </body> </html>
solution2
0 2017-04-21 05:20:19
Add iquery on link and also add class in link like show-more and wrap the message div with parent div like i did msg-wrap
$(document).ready(function(){ $('.show-more').click(function(){ $(this).parents('.msg-wrap').find('.hide').slideToggle(); }) });
* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; padding: 15px 25px; border: 3px solid blue; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; } a, a:focus, a:hover { color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <main id="jdom"> <h1>Expanding and Collapsing messages</h1> <div class="msg-wrap"> <h2>Message 1</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>Hello!</p> </div> <a href="#" class="show-more">Show more</a> </div> <div class="msg-wrap"> <h2>Message 2</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>BOOP</p> </div> <a href="#" class="show-more">Show more</a> </div> <div class="msg-wrap"> <h2>Message 3</h2> <div> <p>Click the link below to expance this message</p> </div> <div class="hide"> <p>Things to do when you're bored</p> <ul> <li>Go for a walk</li> <li>Try your hand at painting.</li> <li>Listen to music</li> </ul> </div> <a href="#" class="show-more">Show more</a> </div> </main> </body> </html>
solution3
0 ACCPTED 2017-04-21 05:32:01
$(document).ready(function(){ $('a').on( "click", function(){ $(this).prev("div").toggleClass('hide'); if($(this).text() == 'Show more') { $(this).text('Show Less'); } else { $(this).text('Show more'); } }); });
* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; padding: 15px 25px; border: 3px solid blue; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; } a, a:focus, a:hover { color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <main id="jdom"> <h1>Expanding and Collapsing messages</h1> <h2>Message 1</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>Hello!</p> </div> <a href="javasctipt:void();">Show more</a> <h2>Message 2</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>BOOP</p> </div> <a href="javasctipt:void();">Show more</a> <h2>Message 3</h2> <div> <p>Click the link below to expance this message</p> </div> <div class="hide"> <p>Things to do when you're bored</p> <ul> <li>Go for a walk</li> <li>Try your hand at painting.</li> <li>Listen to music</li> </ul> </div> <a href="javasctipt:void();">Show more</a> </main> </body> </html>
solution4
0 2017-04-21 05:38:55
* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; padding: 15px 25px; border: 3px solid blue; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; } a, a:focus, a:hover { color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <main id="jdom"> <h1>Expanding and Collapsing messages</h1> <h2>Message 1</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>Hello!</p> </div> <a href="#" class="show_more">Show more</a> <h2>Message 2</h2> <div> <p>Click the link below to expand this message</p> </div> <div class="hide"> <p>BOOP</p> </div> <a href="#" class="show_more">Show more</a> <h2>Message 3</h2> <div> <p>Click the link below to expance this message</p> </div> <div class="hide"> <p>Things to do when you're bored</p> <ul> <li>Go for a walk</li> <li>Try your hand at painting.</li> <li>Listen to music</li> </ul> </div> <a href="#" class="show_more">Show more</a> </main> <script> $(document).ready(function(){ $(document).on("click",".show_more",function(){ $(this).prev().toggle(); $(this).text(function(i, text){ return text === "Show more" ? "Show Less" : "Show more"; }) }); }); </script> </body> </html>
solution5
0 2017-05-30 05:48:00
$("a.show-more").on("click",function(){
$(this).text(function(i, v){
return v === 'Show More' ? 'Show Less' : 'Show More'
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
div tag not collapsing/expanding using jquery
jQuery Expanding & Collapsing lists
Expanding and collapsing table cell values using js/jquery
Expanding and collapsing table rows in jQuery
Expanding / Collapsing text area problems
Collapsing and expanding multiple nested rows in jQuery
JQuery collapsing/expanding need to calculate height
jquery selector problem in hierarchical expanding/collapsing tree
jQuery Expanding Nav Collapsing on Child Click
Expanding text with button click using jquery
Related Tags