Java Script: Using a Toggle to Show More or Less

Question

I need some help. I have to write a javascript code that will toggle the a element for show more or less. If I click on show more, it should show the more with a link for show less.

Problem I am Having

1. If I click show more About the Author, instead of just showing more info about just that, it will also show more info about the book description, and who this book is for. . I don't want it to do that, I just want it to show me more info about just that specific one.

2. It's also not showing me or giving me the less link option.

Here is my HTML and JavaScript code.

 $(document).ready(function() { $("#jdom").click(function() { $("a").toggle(function () { $(this).text("").siblings("div").hide(); }, function() { $(this).text("Less").siblings("div").show(); }); }); });

 article, aside, figure, figcaption, footer, header, nav, section { display: block; } * { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; border: 3px solid blue; } section { padding: 15px 25px; } 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; }

 <!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-latest.min.js"></script> <script src="subset_expansion.js"></script> </head> <body> <section id="jdom"> <h1>Murach's JavaScript and DOM Scripting</h1> <h2>Book description</h2> <div> <p>You can read other JavaScript books from start to finish and still not know how to develop dynamic websites like you want to.</p> </div> <div class="hide"> <p>But now, you can go from JavaScript beginner to DOM scripting expert in a single book! Fast-paced, professional, and packed with expert practices, our new JavaScript book.</p> </div> <a href="#">Show more</a> <h2>About the author</h2> <div> <p>Ray Harris is an expert JavaScript programmer. That will be obvious to you as soon as you review the 20 complete applications that he presents in this book.</p> </div> <div class="hide"> <p>Ray Harris is much more than a JavaScript programmer.</p> <p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p> </div> <a href="#">Show more</a> <h2>Who this book is for</h2> <div> <p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use JavaScript effectively.</p> </div> <div class="hide"> <p>Here's just a partial list of who can use this book:</p> <ul> <li>Web developers who know HTML and CSS and are ready to master JavaScript.</li> <li>Web developers who program in ASP.NET, JSP, or PHP on the server side and now want to master client-side coding.</li> <li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books but still don't know how to do the type of DOM scripting that's required in real-world applications</li> </ul> </div> <a href="#">Show more</a> </section> </body> </html>

I don't know what I am doing wrong.

Answer 1

Try This,

    $(document).ready(function() {
      $(document).on('click','a',function(e){
         $(this).text( ($(this).text()  == "Show more") ? "Less":"Show more" ) ;
         $(document).find($(this).attr('data-target')).toggle();

         /*OR WITH ANIMATION*/
         /*
         if($(this).text()  == "Show more"){
            $(this).text("Less");
            $(document).find($(this).attr('data-target')).slideDown(300);
         }else{
            $(this).text("Show more");
            $(document).find($(this).attr('data-target')).slideUp(300);
         }*/
      });



    /*MORE ACTION*//*
     $(document).on('click','#jdom',function(e){
             $(document).find('a').each(function(){
                     $(this).trigger('click');
             })
          });
    */
    });

HTML PART UPDATE AS BELOW

<!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-latest.min.js"></script>
    <script src="subset_expansion.js"></script>     
</head>

<body>
    <section id="jdom">
        <h1>Murach's JavaScript and DOM Scripting</h1>
        <h2>Book description</h2>
        <div>
            <p>You can read other JavaScript books from start to finish and still not
            know how to develop dynamic websites like you want to.</p>
        </div>
        <div class="hide" id="bookDesc">
            <p>But now, you can go from JavaScript beginner to DOM scripting expert in a 
            single book! Fast-paced, professional, and packed with expert practices, our 
            new JavaScript book.</p>
        </div>
        <a href="#" data-target="#bookDesc">Show more</a>           

        <h2>About the author</h2>
        <div>
            <p>Ray Harris is an expert JavaScript programmer. That will be obvious to you 
            as soon as you review the 20 complete applications that he presents in this 
            book.</p>
        </div>
        <div class="hide" id="author">
            <p>Ray Harris is much more than a JavaScript programmer.</p>
            <p>So when Ray said he wanted to write for us, it didn't take us long to hire 
            him.</p>
        </div>
        <a href="#" data-target="#author">Show more</a>

        <h2>Who this book is for</h2>
        <div>
            <p>Due to our unique presentation methods and this book's modular organization,
            this is the right book for any web developer who wants to use JavaScript effectively.</p>
        </div>
        <div class="hide" id="bookDet"> 
            <p>Here's just a partial list of who can use this book:</p>
            <ul>
                <li>Web developers who know HTML and CSS and are ready to master JavaScript.</li> 
                <li>Web developers who program in ASP.NET, JSP, or PHP on the server side and 
                now want to master client-side coding.</li>
                <li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books 
                but still don't know how to do the type of DOM scripting that's required in 
                real-world applications</li>
            </ul>
        </div>
        <a href="#" data-target="#bookDet">Show more</a>                

    </section>
</body>
</html>

Answer 2

I have modified the HTML a bit, and JS as well. Try using like this, it might give you solution.

 $(document).ready(function() { $("a").click(function(e) { e.preventDefault(); var moreSection = $(this).parents(".section").find(".more-section"); if($(this).text() == "Show more" && moreSection.hasClass("hide")){ $(this).text("Show less"); moreSection.removeClass("hide").addClass("show"); }else{ $(this).text("Show more") moreSection.addClass("hide").removeClass("show"); } }); });

 article, aside, figure, figcaption, footer, header, nav, section { display: block; } * { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; border: 3px solid blue; } section { padding: 15px 25px; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } div.hide { display: none; } div.show { display: block; } ul { padding-left: 45px; } li { padding-bottom: .4em; } p, a { padding-bottom: .4em; padding-left: 25px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section id="jdom"> <h1>Murach's JavaScript and DOM Scripting</h1> <h2>Book description</h2> <div class="section"> <p>You can read other JavaScript books from start to finish and still not know how to develop dynamic websites like you want to.</p> <div class="hide more-section"> <p>But now, you can go from JavaScript beginner to DOM scripting expert in a single book! Fast-paced, professional, and packed with expert practices, our new JavaScript book.</p> </div> <a href="#">Show more</a> </div> <h2>About the author</h2> <div class="section"> <p>Ray Harris is an expert JavaScript programmer. That will be obvious to you as soon as you review the 20 complete applications that he presents in this book.</p> <div class="hide more-section"> <p>Ray Harris is much more than a JavaScript programmer.</p> <p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p> </div> <a href="#">Show more</a> </div> <h2>Who this book is for</h2> <div class="section"> <p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use JavaScript effectively.</p> <div class="hide more-section"> <p>Here's just a partial list of who can use this book:</p> <ul> <li>Web developers who know HTML and CSS and are ready to master JavaScript.</li> <li>Web developers who program in ASP.NET, JSP, or PHP on the server side and now want to master client-side coding.</li> <li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books but still don't know how to do the type of DOM scripting that's required in real-world applications</li> </ul> </div> <a href="#">Show more</a> </div> </section>

Java Script: Using a Toggle to Show More or Less

Question

2 answers

solution1
2 2016-11-17 07:26:48

solution2
0 ACCPTED 2016-11-17 07:27:04

Java Script: Using a Toggle to Show More or Less

Question

2 answers

solution1 2 2016-11-17 07:26:48

solution2 0 ACCPTED 2016-11-17 07:27:04

solution1
2 2016-11-17 07:26:48

solution2
0 ACCPTED 2016-11-17 07:27:04