Hide/show the content of a div using button

Question

I am working on a news website and trying to show the full content of news article on click of a button.My code is

<script>
$(document).ready(function(){
                $("#toggle-news-content").click(function(){
                    $("#news-content").fadeToggle(300);
                    if($("#toggle-news-content").text()=="More")
                        $("#toggle-news-content").text("Less");
                    else
                        $("#toggle-news-content").text("More");           
                });
               });
        </script>

            <div id="news-heading"><h3>news 2 heading</h3></div>
            <div id="news-content" class="news-content">news 2 content</div>
            <button id="toggle-news-content">More</button>


            <div id="news-heading"><h3>news 2 heading</h3></div>
            <div id="news-content" class="news-content">news 2 content</div>
            <button id="toggle-news-content">More</button>

Problem is when I click on the "More" button of news 1 the script is working. But it's doing nothing when I click "More" button of news 2. As the number of news is dynamic may vary time to time. Can anyone debug this code(Here I'm showing the code that causing the problem)

You cannot have duplicate ids – bhansa Oct 06 '17 at 06:31 — bhansa, Oct 06 '17 at 06:31

A. Iglesias · Answer 1 · 2017-10-06T06:38:44.237

First, you're using the same id in multiple elements. You shouldn't do that, because idis designed to be unique in the DOM. Change it for classes...

<div class="news-heading"><h3>news 2 heading</h3></div>
<div class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>

<div class="news-heading"><h3>news 2 heading</h3></div>
<div class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>

Then, when you click a button you have to select its related div.news-content, because that's what you want to show/hide. You can use prev()...

$(".toggle-news-content").click(function() {
    $(this).prev("div.news-content").fadeToggle(300);
    $(this).text($(this).text() == "More" ? 'Less' : "More");
});

I hope it helps

score -1 · Answer 2 · answered Oct 06 '17 at 06:33

An id should be unique, instead use classes.

Then inside the function you can use $(this) to manipulate the affected element.

Please note that it now HIDES the content and shows LESS. I would switch that.

$(document).ready(function() {
  $(".toggle-news-content").click(function() {
    $(this).prev('.news-content').fadeToggle(300);
    if ($(this).text() == "More")
      $(this).text("Less");
    else
      $(this).text("More");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-heading">
  <h3>news 2 heading</h3>
</div>
<div id="news-content1" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>


<div class="news-heading">
  <h3>news 2 heading</h3>
</div>
<div id="news-content2" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>

score -1 · Answer 3 · answered Oct 06 '17 at 06:36

This is the most easier and elegant solution to your question. I changed your button ID for class and made the html() toggle with a ternary opetaror:

$(document).ready(function() {
    $(".toggle-news-content").click(function() {
        $(this).prev(".news-content").fadeToggle(300);
        $(this).html() == "More" ? $(this).html('Less') : $(this).html('More');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="news-heading"><h3>news 2 heading</h3></div>
            <div id="news-content" class="news-content">news 2 content</div>
            <button class="toggle-news-content">More</button>


            <div id="news-heading"><h3>news 2 heading</h3></div>
            <div id="news-content" class="news-content">news 2 content</div>
            <button class="toggle-news-content">More</button>

score -1 · Answer 4 · answered Oct 06 '17 at 06:39

You should have unique id on your webpage use classes instead.

You have dynamic content news adding to your webpage use jquery on handler with click event.

.on( events [, selector ] [, data ], handler )

It can handle events for dynamic content as well.

$(document).ready(function() {
  $(".toggle-news-content").on("click", function() {
    $(this).prev(".news-content").fadeToggle(300);
    if ($(this).text() == "More"){
      
      $(this).text("Less");
      }
    else
      $(this).text("More");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="news-heading1">
  <h3>news 2 heading</h3>
</div>
<div id="news-content1" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>


<div id="news-heading2">
  <h3>news 2 heading</h3>
</div>
<div id="news-content2" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>

score -1 · Answer 5 · answered Oct 06 '17 at 06:41

-1

firstly, you shouldn't have same id in two or more elements, you should use class

replace id="news-heading" with class="news-heading"

and id="toggle-news-content" with class="toggle-news-content"

then, it's really simple, use this script:

$(function() {
    $(".toggle-news-content").click(function() {
        var content = $(this).prev();
        $(this).text(content.is(':visible')?'Show':'Less');
        content.toggle();
    });
});

answered Oct 06 '17 at 06:41

Taufik Nur Rahmanda

1,433
1
11
24

Why my correct & tested answer get the downvote? :( Why all answers here got the downvote? We're all going to help the asker. – Taufik Nur Rahmanda Oct 07 '17 at 10:39
Probably while we didn't search for the duplicate question ... – LinkinTED Oct 09 '17 at 06:22

Hide/show the content of a div using button

5 Answers5