I'm having trouble getting the hidden content to display when I click the button. Can anyone help me figure out why this is happening

I am currently working on implementing a read more, read less button functionality. My hidden content is stored in a span tag and I have utilized JavaScript to achieve this feature. However, upon clicking the button, no action is taken. The objective is to create a news section that expands to show more news articles when the button is clicked.

Previously, this functionality was working perfectly fine for me. I used the same code successfully before integrating it with some additional code, which unfortunately resulted in the current issue.

... (additional content removed for brevity)

The expected behavior is for the button to display the content within the read more tag when clicked.

However, currently, the button does not perform any action upon clicking it.

javascripthtmlcss

Answer №1

Modify the 

<button onclick="myFunction()" id="myBtn">Read more</button>
code to 
<button onclick="toggleNewsButton()" id="myBtn">Read more</button>

You mistakenly used the incorrect function

function toggleNewsButton() {
    var readmore = document.getElementById("readmore");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");

      if (readmore.style.display === "none") {
      readmore.style.display = "inline";
      btnText.innerHTML = "Read more"; 
       moreText.style.display = "none";
        } else {
      readmore.style.display = "none";
       btnText.innerHTML = "Read less"; 
       moreText.style.display = "inline";
        }
      }
#more {display: none;}

    #myBtn{
color:black;
background:#fff;
border: 1px solid black;
font-size: 17px;
padding: 7px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 12px;

    }

     .centerButton{
 text-align: center;
     }

      #myBtn:hover, #myBtn:active {
 background:black;
 color:white;

    }
<section id="#" class="">

    <div class="allStories">
        <hr> 
        <h2 style = "text-align:center;" > All Stories</h2>
        <hr>
        <div class="smallSpacer"></div>


        <div class="row">
          <div class ="col-sm-6" style = "text-align:left;"> 
            <p class="#"  style = "color:lightgray;">Jan, 01, 2019 </p>
            <small>Title of the news article will be diplayed under the photo. </small>
          </div>
          <div class ="col-sm-6" style = "text-align: right;">
           <img src = "/images/news1.jpg" style = "height:200px; width:300px;">
         </div>
       </div>

       <hr> 

       <div class="row">
        <div class ="col-sm-6" style = "text-align:left;"> 
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class ="col-sm-6" style = "text-align: right;">
         <img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
       </div>
     </div>

       <hr> 

       <div class="row">
      <div class ="col-sm-6" style = "text-align:left;"> 
        <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class ="col-sm-6" style = "text-align: right;">
       <img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
       </div>
       </div> 

      <hr>

      <span id="readmore"></span>

         <span id="more">

          <div class="row">
          <div class ="col-sm-6" style = "text-align:left;"> 
            <p class="#"  style = "color:lightgray;">Jan, 01, 2019 </p>
            <small>Title of the news article will be diplayed under the photo. </small>
          </div>
          <div class ="col-sm-6" style = "text-align: right;">
           <img src = "/images/news1.jpg" style = "height:200px; width:300px;">
         </div>
       </div>

       <hr> 

       <div class="row">
        <div class ="col-sm-6" style = "text-align:left;"> 
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class ="col-sm-6" style = "text-align: right;">
         <img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
       </div>
     </div>

     <hr>

     <div class="row">
      <div class ="col-sm-6" style = "text-align:left;"> 
        <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class ="col-sm-6" style = "text-align: right;">
       <img src = "/images/news3.jpg" style = "height:200px; width:300px; ">

       </div> 
       </div>
       </span>

       </div>
      </div>

      <div class="centerButton">
      <button onclick="toggleNewsButton()" id="myBtn">Read more</button>
      </div>

      </section>

Answer №2

This is the solution. This part also required modification: 

if (readmore.style.display === "none") {

to

if (moreText.style.display === "none") {


function toggleNewsButton() {
  var readmore = document.getElementById("readmore");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (moreText.style.display === "none") {
    readmore.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    readmore.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
#more {
  display: none;
}

#myBtn {
  color: black;
  background: #fff;
  border: 1px solid black;
  font-size: 17px;
  padding: 7px 12px;
  font-weight: normal;
  margin: 6px 0;
  margin-right: 12px;
}

.centerButton {
  text-align: center;
}

#myBtn:hover,
#myBtn:active {
  background: black;
  color: white;
}
<section id="#" class="">

  <div class="allStories">
    <hr>
    <h2 style="text-align:center;"> All Stories</h2>
    <hr>
    <div class="smallSpacer"></div>

    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news1.jpg" style="height:200px; width:300px;">
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news2.jpg" style="height:200px; width:300px; ">
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news3.jpg" style="height:200px; width:300px; ">
      </div>
    </div>
    <hr>
    <span id="readmore"></span>

    <div id="more">

      <div class="row">
        <div class="col-sm-6" style="text-align:left;">
          <p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class="col-sm-6" style="text-align: right;">
          <img src="/images/news1.jpg" style="height:200px; width:300px;">
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-sm-6" style="text-align:left;">
          <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class="col-sm-6" style="text-align: right;">
          <img src="/images/news2.jpg" style="height:200px; width:300px; ">
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-sm-6" style="text-align:left;">
          <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class="col-sm-6" style="text-align: right;">
          <img src="/images/news3.jpg" style="height:200px; width:300px; ">
        </div>
      </div>
    </div>
  </div>
  </div>

  <div class="centerButton">
    <button onclick="toggleNewsButton()" id="myBtn">Read more</button>
  </div>

</section>

Answer №3

It seems unnecessary to include the #readmore, considering it's just an empty span. Therefore, I have removed it. Additionally, when you apply display: none in the CSS, the style.display will be an empty string as it only works for inline styles (you can observe this in action here.

Please review the modifications I have made.

function toggleNewsButton() {
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (!moreText.style.display || moreText.style.display === "none") {
    btnText.innerHTML = "Read less";
    moreText.style.display = "block";
  } else {
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  }
}
#more {
  display: none;
}

#myBtn {
  color: black;
  background: #fff;
  border: 1px solid black;
  font-size: 17px;
  padding: 7px 12px;
  font-weight: normal;
  margin: 6px 0;
  margin-right: 12px;
}

.centerButton {
  text-align: center;
}

#myBtn:hover,
#myBtn:active {
  background: black;
  color: white;
}
<section id="" class="">

  <div class="allStories">
    <hr>
    <h2 style="text-align:center;"> All Stories</h2>
    <hr>
    <div class="smallSpacer"></div>


    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news1.jpg" style="height:200px; width:300px;">
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news2.jpg" style="height:200px; width:300px; ">
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-sm-6" style="text-align:left;">
        <p class="#" style="color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class="col-sm-6" style="text-align: right;">
        <img src="/images/news3.jpg" style="height:200px; width:300px; ">
      </div>
    </div>

    <hr>

    <span id="more">

          <div class="row">
          <div class ="col-sm-6" style = "text-align:left;"> 
            <p class="#"  style = "color:lightgray;">Jan, 01, 2019 </p>
            <small>Title of the news article will be diplayed under the photo. </small>
          </div>
          <div class ="col-sm-6" style = "text-align: right;">
           <img src = "/images/news1.jpg" style = "height:200px; width:300px;">
         </div>
       </div>

       <hr> 

       <div class="row">
        <div class ="col-sm-6" style = "text-align:left;"> 
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
          <small>Title of the news article will be diplayed under the photo. </small>
        </div>
        <div class ="col-sm-6" style = "text-align: right;">
         <img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
       </div>
     </div>

     <hr>

     <div class="row">
      <div class ="col-sm-6" style = "text-align:left;"> 
        <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
        <small>Title of the news article will be diplayed under the photo. </small>
      </div>
      <div class ="col-sm-6" style = "text-align: right;">
       <img src = "/images/news3.jpg" style = "height:200px; width:300px; ">

       </div> 
       </div>
       </span>
  </div>

  <div class="centerButton">
    <button onclick="toggleNewsButton()" id="myBtn">Read more</button>
  </div>

</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Calculate the total of all the numerical data within a collection of objects stored in an array

I have an array of objects structured like this: data: [ a:[ {keyone:'a', keytwo: 'anna', keythree: 23, keyfour: 15}, {keyone:'a', keytwo: 'anna', keythree: 23, keyfour: 15}, ...

javascriptarrayslodash

How can we best store the component's state in the URL in AngularJS?

I am working with a reusable widget that has its own state. This state includes the content of the search bar (2), one or more select boxes (1), and the tree where the user can pick the currently active element (3). My goal is to create a locationManager ...

javascriptangularjsangularurl-routingangular-routing

If an object is discovered in the array, increase its value; if not, add it to the array

I am facing a challenge with executing an updateOne() query on my database. The objective is to increment a specific value in a document if an object within an array in the document has an _id that matches a certain value. If there are no matches with that ...

javascriptmongodbmongoose

What is the most efficient way to utilize a recurring pattern across multiple regular expressions?

Can you create a single instruction to handle the phrase BCC Fans community? if (document.title.match(/(.+?) - BCC Fans community$/)) { document.title = document.title.match(/(.+?) - BCC Fans community$/)[1] } else if (document.title.match(/^BCC Fan ...

javascriptregexdry

Exporting a class from an index.ts file may result in a problem where the injected constructor is

Utilizing an index.ts file to manage exports, following the guidelines outlined in the Angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure), has been successful throughout my application deve ...

javascripttypescriptangularangular2-services

How to pass a String Array to a String literal in JavaScript

I need to pass an array of string values to a string literal in the following way Code : var arr = ['1','2556','3','4','5']; ... ... var output = ` <scr`+`ipt> window.stringArray = [`+ arr +`] & ...

javascriptarraystypescriptstring

Using setTimeout() in JavaScript to create a delay between functions

Is there a way to add a delay between the execution of each function in my program? Currently, I have the following setup: function function0() { setTimeout(function1, 3000); setTimeout(function2, 3000); setTimeout(function0, 3000); } While t ...

javascriptdelaysettimeout

Troubleshooting issue: Bootstrap 4 input group not properly showing invalid feedback text

I've been exploring the features of Bootstrap 4 - beta and I've noticed that when using .is-invalid with .input-group, it doesn't seem to be visible. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.cs ...

csstwitter-bootstrapbootstrap-4

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

javascripthtmlangularjsangular-ui-bootstrap

The toggle class feature is unable to function properly with the push menu

Could you kindly assist me in troubleshooting why this code is not functioning as intended? The issue I'm facing is that when I click on '.push-button', the '#push-menu' opens successfully. However, the expected behavior of showing ...

javascriptjquerymenunavigation

Understanding Vue.js - encountering the error message "property or method is not defined"

Recently, I've come across an issue that seems to be common among many people, but for some reason, I am unable to find a solution despite looking at similar questions. The problem arises when I use a v-for in a Vue Component and the array value cons ...

javascripttypescriptvue.jsvuejs2vue-component

Transform the *.svg image source into inline SVG for easier CSS customization

My goal is to include <img src="some.svg"> in my HTML, as inline SVG can be cumbersome and affect page load times. However, I would like to use CSS to style elements like fill:#fff. PS.: The webpage will be hosted on a nodeJS server and the co ...

csshtmlnode.jssvg

Refreshing Information in Angular

I am attempting to create a reload data button. Here is the JSON structure I am working with: [ { "name": "AAAAAA", "data": "False" }, { "name": "BBBBBB", "data": "45%" ...

javascriptangularjsrefresh

Error message: Failure to retrieve / on the Express application

Embarking on a new project using express, I've set up the foundation with an index.js file in my project folder: var express = require('express'); //App setup var app = express(); var server = app.listen(4000, function(){ console.log(&a ...

htmljsonexpress

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Data in local storage was not successfully saved

UPDATE: The issue has been resolved. Turns out the problem was with the useEffect hook. I am facing an issue where when I attempt to 'submit' a specific task, the status attribute in the local storage does not get updated. I'm unsure where ...

javascriptreactjslocal-storage

Uncovering the Secrets: Navigating through an Array of Form Input Children in ReactJS

I need help with creating a form that allows for a dynamic number of player name input fields, passed to the component PlayerSelect as props.numPlayers. I want to capture the user input from each field and send the names as an array to this.props.setPlayer ...

javascriptarraysformsinputreactjs

The jQuery spoiler functionality is rather basic and only partly functional

I decided to create a very basic jQuery spoiler feature by using the code below: HTML: <a href="" onclick="return false" class="spoiler" content="spoiled content"> Reveal spoiler </a> jQuery / Javascript: $('a.spoiler').cli ...

javascriptjqueryhtml

Angular, underscore, extracted list, arrangement

How can I use underscore or angular to sort the unique product grades and product last delivered dates before putting them into a dropdown filter? product_grades = ["", "40", "20", "30", "35", "45", "50", "60"] product_last_delivered = ["2015-07-29T00:00 ...

javascriptangularjsunderscore.js

Displaying inline causes the block elements to be removed from the

After two months of learning HTML and CSS, I still feel like a beginner. I'm attempting to create a header navigation bar, but whenever I apply the display: inline property, everything vanishes. I know this issue is probably basic, but any advice woul ...

htmlcss