JS .style.display = “inline” Will display as “inline-block” in CSS

Question

I am writing a code for a "Read more" button, following this example from W3schools . The code basically shows and hides the longer text.

The problem I am facing is with the JS code .style.display = "inline" , but it's displayed as inline-block instead, so it moves my text into next line.

 function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; btnText.classList.remove("hide_me"); } else { dots.style.display = "none"; btnText.innerHTML = "Hide"; btnText.classList.add("hide_me"); moreText.style.display = "inline"; jQuery("#more").animate({ maxHeight: '200px', height: '200px' }, ); } if (document.getElementById('vec').style = "inline") { document.getElementById("vec").style.display = "none"; document.getElementById("preberiVec").innerHTML = "Preberi več"; document.getElementById('pikice').style.display = "inline"; document.getElementById("preberiVec").classList.remove('skrij_me'); } }

 #more { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span id="dots">...</span> <span id="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span> <button onclick="myFunction()" class="gumb_vec" id="myBtn">Read more </button></p>

On the link below, its shown how the text is displayed after it's clicked on read more button:

The text is displayed in new line as inline-block , but I would like to have it displayed as inline in the same line as the text before.

If anyone have dealt with this problem before, please help me out!

Thanks

Answer 1

It's actually the jQuery animate function that funks with your concept - if you remove it as per the below it works as expected (except without animation).

 function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; btnText.classList.remove("hide_me"); } else { dots.style.display = "none"; btnText.innerHTML = "Hide"; btnText.classList.add("hide_me"); moreText.style.display = "inline"; //jQuery("#more").animate({maxHeight: '200px', height: '200px'},); } }

 #more {display: none;}

 <p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span id="dots">...</span> <span id="more">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span> <button onclick="myFunction()" class="gumb_vec" id="myBtn">Read more </button></p>