当我点击按钮时隐藏的内容没有显示，为什么会这样？

Question

I am trying create a read more read less button. My content that is hidden is in a span tag. I used some javascript to make this work. Currently, when I click on the button nothing happens. My goal is to create a news section that shows more news when you click on the button.

This was working for me before, I used the exact same code and just merged it with some other code and it stopped working.

  $(document).ready(function () { var windowHeight = window.innerHeight; var navOpen = false; var onCloseBtn = false; var onAccordian = false; $("#hamburger").mouseover(function(){ if(!navOpen){ openMenu(); } onCloseBtn = true; }); $("#hamburger").mouseout(function(){ onCloseBtn = false; }); $("#hamburger").click(function(){ toggleNav(); console.log("clickedHam"); }); $("#navMenu").mouseover(function(){ if(!navOpen && !onCloseBtn){ keepOpen(); } }); $("#activeSpace").mouseleave(function(){ console.log("navMenu Mouseout"); closeMenu(); }); function toggleNav(){ if(navOpen){ closeMenu(); } else { openMenu(); } } function keepOpen(){ console.log("keepOpen"); navOpen = true; $('#hamburger').html('&times;'); $('#hamburger').css("color","black"); $("#navMenu").css("visibility","visible"); $("#navMenu").css("height","auto"); $("#navMenu").css("max-height", windowHeight); } function openMenu(){ console.log("open"); navOpen = true; $('#hamburger').html('&times;'); $('#hamburger').css("color","black"); $("#navMenu").css("visibility","visible"); $("#navMenu").css("max-height", "250px"); ///change this depending on the max } function closeMenu(){ closePanels(); navOpen = false; console.log("close") $('#hamburger').html('&#9776;'); $('#hamburger').css("color","white"); $("#navMenu").css("max-height", "0"); $("#navMenu").css("visibility","hidden"); } $(document).on('scroll', function() { if($(this).scrollTop()>=$('#changeNavColor').position().top - 40 && !navOpen){ $(hamburger).css("color","black"); } if($(this).scrollTop()<$('#changeNavColor').position().top - 40 && !navOpen){ $(hamburger).css("color","white"); } }); var acc = document.getElementsByClassName("mobile-accordian"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { //this.classList.toggle("active"); $("#navMenu").css("height","auto"); $("#navMenu").css("max-height", windowHeight); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } function closePanels() { var panels = document.getElementsByClassName("mobile-accordian-panel"); var j; for (j = 0; j < panels.length; j++){ panels[j].style.maxHeight = null; } } 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"; } } }); 

  html, body{ width: 100%; height: 100%; font-family: 'Roboto', sans-serif; } h1{ font-size: 3em; } h2{ font-size: 1.5em; } h3{ font-size: 0.75em; font-weight:400; text-transform: uppercase; } .FullsizeImg{ background-repeat: no-repeat; background-size: 30%; background-position: right; } #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; } .allStories{ margin-left:20px; margin-right:20px; } #hamburger{ z-index: 11; display: block; visibility: visible; position: fixed; top: 10px; left: 10px; color: white; transition: all 0.25 ease; } #closeBtn{ display:block; position:fixed; top:10px; left:10px; } #navMenu{ z-index: 10; display: block; overflow:hidden; position: fixed; top: 0; left: 0; color: black; background-color: white; box-shadow: 0 0 8px rgba(33,33,33,.6); max-height: 0; width: 100%; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; transition: 1s ease; visibility: hidden; } .nav ul { list-style-type: none; margin: 0; padding: 0; } .nav ul li { color: grey; font-size: 14px; font-weight: regular; font-family: inherit; padding: 5px 0px 5px 0px; cursor: pointer; transition: .5s ease; -webkit-transition: .5s ease; -moz-transition: .5s ease; } .nav li:hover { color: lightgrey; font-weight: bold; transition: .5s ease; -webkit-transition: .5s ease; -moz-transition: .5s ease; } .mainMargins{ margin-left: 10%; margin-right: 10%; } .smallSpacer{ height: 25px; } .bigSpacer{ height: 100px; } .txtAlignRight{ } .AlwaysFullScreen{ width: 100%; height: 100%; } .fullScreen{ width: 100%; height: 100%; } .withBGImg{ background-repeat: no-repeat; background-size: cover; background-position: center; } .jumbo-title{ font-weight: bold; letter-spacing: 0.02em; } .jumbo-caption{ font-weight: 300; font-size: } .jumbo-container{ color: white; } .verticalCentreParent{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .verticalCentreChild{ position: relative; top: 50%; transform: translateY(-50%); } .content-verticalCentreParent{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .content-verticalCentreChild{ position: relative; top: 50%; transform: translateY(-50%); } .iconContainer{ text-align: center; } .mediumIcons{ height: 100px; } .scrollCard{ box-shadow: 0 0 8px rgba(33,33,33,.2); width: 200px; height: 250px; border-radius: 10px; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; } .scrollCard:hover{ box-shadow: 0 0 11px rgba(33,33,33,.5); } .scrollCardBar { display: flex; min-width: 100%; min-height: 200px; overflow-x: auto; margin: 0; } .scrollCard { min-width: 300px; margin: 8px; } .scrollCardContainer{ display: flex; margin-left: 10%; margin-right: 10%; } .scrollCardBar::-webkit-scrollbar { display: none; } .endOfScroll{ width: 100px; } .line{ margin-top: 10px; margin-bottom: 35px; background-color: white; height: 1px; } footer{ height: auto; background-color: #5388EF; color: white; width: 100%; position: relative; } footer ul{ font-weight: 300; list-style-type: none; margin-top: 20px; padding: 0; } footer li{ padding: 10px 0px 5px 0px; } footer .row{ margin: auto; } footer .footer-column{ width: calc(100% / 6); height: auto; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0px 20px 20px 20px; margin-top: 20px; } @media only screen and (min-width: 2000px){ .mainMargins{ margin-left: 25%; margin-right: 25%; } .scrollCardContainer{ margin-left: 25%; margin-right: 25%; } } @media only screen and (max-height: 1000px){ .fullScreen{ height: auto; width: auto; } .content-verticalCentreChild{ position: relative; top: 100%; transform: none; } } @media only screen and (max-width: 1400px) { footer .footer-column{ width: calc(100% / 3); } } @media only screen and (max-width: 600px) { h1{ font-size: 2em; } h2{ font-size: 1em; } #hamburger{ top: 5px; left: px; } .mobile-accordian-panel{ max-height: 0; overflow: hidden; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; } .mainMargins{ margin-left: 8%; margin-right: 8%; } .content-verticalCentreChild{ position: relative; top: 100%; transform: none; } .scrollCardContainer{ margin-left: 8%; margin-right: 8%; } .endOfScroll{ width: 16px; } footer .footer-column{ width: 100% } } 

 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="/css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript" src="/javascript/main.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet"> </head> <body> <div class = "nav"> <span id="hamburger" style="font-size:30px;cursor:pointer">&#9776; </span> <div id = "activeSpace"> <div id = "navMenu"> <div class = "row mainMargins" style="margin-top:20px;"> <div class = "col-sm-3"> <div class = "mobile-accordian"> <h3>Title</h3> </div> <div class = "mobile-accordian-panel"> <ul class = "menu-subItems"> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> </div> <div class = "col-sm-3"> <div class = "mobile-accordian"> <h3>Title</h3> </div> <div class = "mobile-accordian-panel"> <ul class = "menu-subItems"> <li>About</li> <li>Mission</li> </ul> </div></div> <div class = "col-sm-3"><div class = "mobile-accordian"> <h3>Title</h3> </div> <div class = "mobile-accordian-panel"> <ul class = "menu-subItems"> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> </ul> </div></div> <div class = "col-sm-3"><div class = "mobile-accordian"> <h3>Title</h3> </div> <div class = "mobile-accordian-panel"> <ul class = "menu-subItems"> <li>About</li> <li>Mission</li> <li>Services</li> </ul> </div> </div> </div> <div class = "smallSpacer"></div> </div> </div> </div> <section id = "landing" class = "AlwaysFullScreen"> <div class = "AlwaysFullScreen withBGImg verticalCentreParent" style = "background-image: url(/images/placeHolder.jpg)"> <div class = "jumbo-container verticalCentreChild mainMargins"> <img class = "logo" src = "/images/logo.png"> <div class = "smallSpacer"></div> <h1 class = "jumbo-title">Catchy Headline That Spans Multiple Lines</h1> <h2 class = "jumbo-caption">Headline Caption (Optional)</h2> </div> </div> </section> <div id="changeNavColor"></div> <section id = "#" class="fullScreen"> <div class = "fullScreen content-verticalCentreParent"> <div class = "mainMargins content-verticalCentreChild"> <div class = "row"> <div class = "iconContainer col-sm-4 content-verticalCentreParent" style=""> <img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg" > </div> <div class = "col-sm-8"> <h1>Title</h1> <p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p> </div> </div> <div class = "bigSpacer"></div> <div class = "row"> <div class = "col-sm-8 text-right"> <h1>Title</h1> <p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking).</p> </div> <div class = "iconContainer col-sm-4 verticalCentreParent"> <img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg"> </div> </div> <div class = "bigSpacer"></div> <div class = "row"> <div class = "iconContainer col-sm-4 verticalCentreParent" style=""> <img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg" > </div> <div class = "col-sm-8"> <h1>Title</h1> <p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p> </div> </div> </div> </div> </div> </section> <section id = "#" class="fullScreen"> <div class = "fullScreen content-verticalCentreParent"> <div class = "content-verticalCentreChild"> <div class = "mainMargins"> <h1>Title</h1> <p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking).</p> </div> <div class = "bigSpacer"></div> <div class="scrollCardBar"> <div class = "scrollCardContainer"> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class="scrollCard"></div> <div class = "endOfScroll"></div> </div> </div> </div> </section> <section id="#" class="fullScreen"> <div class = "fullScreen content-verticalCentreParent FullsizeImg" style ="background-image: url(/images/brain.svg)"> <div class = "content-verticalCentreChild"> <div class = "mainMargins"> <h1>Title</h1> <p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p> </div> </div> </div> </section> <section id="#" class=""> <div class = "mainMargins"> <h1 id ="#" style = "text-align:center;" > Meet Our Reseachers</h1> <h3>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </h3> <div class ="row"> <div class = "col-sm-4" style ="text-align: center;"> <img class="imagePeople" src = "/images/person1.jpg" style = "height: 300px;"> <div class="spacer"></div> <small>A groundbreaking blueprint for store-program computers. Though a complete version of the ACE was never built, its concept has been used as a model by tech corporations worldwide for several years</small> </div> <div class = "col-sm-4" style ="text-align: center;"> <img class="imagePeople" src = "/images/person2.jpg" style = "height: 300px;"> <div class="spacer"></div> <small>He first addressed the issue of artificial intelligence in his 1950 paper, "Computing machinery and intelligence". If an AI can convice a human that is it human, it should be considered intelligent.</small> </div> <div class = "col-sm-4" style ="text-align: center;"> <img class="imagePeople" src = "/images/person3.jpg" style = "height: 300px;"> <div class="spacer"></div> <small>The highest acheivable award in the field of computer science. Named after Alan Turing for his grand contributions and is equivalent to the Noble Prize.</small><div class="bigSpacer"></div><div class="bigSpacer"></div> </div> </div> </div> <div class="bigSpacer"></div> </section> <section id="#" class=""> <div class = "mainMargins"> <h1 id ="#" style = "text-align:center;" > News</h1> <h3 id ="#" style = "text-align:center;" > Read the Storie's of sTTARR's reseachers and users. </h3> <div class="smallSpacer"></div> <div class ="row"> <div class = "col-sm-4" style ="text-align: center;"> <p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p> <img src = "/images/news1.jpg" style = "height:200px; width:300px;"> <div class="smallSpacer"></div> <small>Title of the news article will be diplayed under the photo. </small> </div> <div class = "col-sm-4" style ="text-align: center;"> <p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p> <img src = "/images/news2.jpg" style = "height:200px; width:300px;"> <div class="smallSpacer"></div> <small>Title of the news article will be diplayed under the photo. </small> </div> <div class = "col-sm-4" style ="text-align: center;"> <p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p> <img src = "/images/news3.jpg" style = "height:200px; width:300px;"> <div class="smallSpacer"></div> <small>Title of the news article will be diplayed under the photo. </small> <div class="smallSpacer"></div> </div> </div> <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> <div class="bigSpacer"></div><div class="bigSpacer"></div><div class="bigSpacer"></div></div><div class="bigSpacer"></div></div><div class="bigSpacer"></div> <section id = "#" class=""> <div class = " content-verticalCentreParent"> <div class = "content-verticalCentreChild"> <div class = "mainMargins"> <div class ="row"> <div class = "col-sm-4" style ="text-align: left;"> <h2> Updates </h2> <div class="smallSpacer"></div> <p> Here is a live twitter update.Here is a live twitter update.Here is a live twitter update.Here is a live twitter update. </p> </div> <div class = "col-sm-8" style ="text-align: center;"> <a class="twitter-timeline" data-width="400" data-height="700" href="https://twitter.com/UHN?ref_src=twsrc%5Etfw">Tweets from UHN</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class = "bigSpacer"></div> </div> </div> </section> <div class = "bigSpacer"></div> <footer> <div class = "mainMargins"> <div class = "smallSpacer"></div> <div class = "line"></div> <div class = "row"> <div class = "footer-column"> <img src="/images/logo.png" style = "height: 40px"> </div> <div class = "footer-column"> <h3>Title</h3> <ul class = ""> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> <div class = "footer-column"> <h3>Title</h3> <ul class = ""> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> <div class = "footer-column"> <h3>Title</h3> <ul class = ""> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> <div class = "footer-column"> <h3>Title</h3> <ul class = ""> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> <div class = "footer-column"> <h3>Title</h3> <ul class = ""> <li>About</li> <li>Mission</li> <li>Services</li> <li>Social</li> <li>Get in touch</li> </ul> </div> </div> </div> </footer> </body> </html> 

EXPECTED: button should show the information in the read more tag.

ACTUAL: button doesn't do anything when you click it.

Answer 1

Replace <button onclick="myFunction()" id="myBtn">Read more</button> with <button onclick="toggleNewsButton()" id="myBtn">Read more</button>

You did put the wrong 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 should do it. This also needed changing:

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

I'm not sure what you need the #readmore , it's an empty span after all. Anyway, I got rid this. Also, when you set display: none in the css, the style.display will be an empty string, it's working only for inline style (See this in action here .

Just follow the changes I did.

 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>