showing extra text in hide/show button

Question

My problem is that when I press the button paragraph's text should be hide and will show "Click to see more" and again pressing the same button the paragraph's text should be visible.

Welcome to SO. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask). To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Here's a [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) you might find useful... — Mister Jojo, Jun 06 '21 at 13:35

score 0 · Answer 1 · answered Jun 06 '21 at 14:40

I am not sure that I answer your question. but here is a simple solution using vanilla JS by setting the height to your paragaph and set its css overflow attribute to hidden. Then programmatically set the overflow attribute to none you can archive as the following:

<body>
<p style="width: 500px; height: 20px; overflow: hidden;" id="myParagraph">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis amet sunt laudantium officia 
    sed porro dolorem odit iusto quidem enim ab nihil, quos quod ad quam atque veritatis iure architecto?

</p>
<button id="btnSeeMore">See More</button>
<script>    
    var seeMore = true;
    var myParagraph = document.getElementById('myParagraph');
    var myBtn = document.getElementById('btnSeeMore');
    
    myBtn.addEventListener('click',function(e){
        console.log("event",e);
        if(seeMore){
            
            console.log("if");
            myParagraph.style.overflow = "none"; 
            myParagraph.style.height = "100px"; 
            myBtn.innerHTML = "See Less";
            seeMore = false;
           
        }else{
            console.log("else");
            myParagraph.style.overflow = "hidden"; 
            myParagraph.style.height = "20px"; 
            myBtn.innerHTML = "See More";
            seeMore = true;
        }
        
    });
</script>

Here is jsfiddle https://jsfiddle.net/jtdb6ecf/1/

score 0 · Answer 2 · answered Jun 06 '21 at 15:31

I think here is the code that you need

    <div id="myParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nostrum 
    dolore sapiente ducimus facere accusamus illo libero, vero nihil impedit.</div>
<div>
    <button id="btnShowMore">Show More</button>
    <button id="btnHide">Hide</button>
</div>
<script>
    const myParagraph = document.getElementById("myParagraph");
    const btnShowMore = document.getElementById("btnShowMore");
    const btnHide = document.getElementById("btnHide");

    let myText = myParagraph.innerHTML;
    btnShowMore.addEventListener("click",()=>{
        // everytime when the user click show more
        myParagraph.innerHTML += myText;
    })
    btnHide.addEventListener("click",()=>{
        // if you want to display the first text use myText if you don't want to siplay anything use ""
        myParagraph.innerHTML = myText;
    })
</script>

you can do it by CSS by using display none or inline but here you don't need it, but here is code:

    <script>
    const myParagraph = document.getElementById("myParagraph");
    const btnShowMore = document.getElementById("btnShowMore");
    const btnHide = document.getElementById("btnHide");

    let myText = myParagraph.innerHTML;
    btnShowMore.addEventListener("click",()=>{
        // everytime when the user click show more
        myParagraph.innerHTML += myText;
        myParagraph.style.display = "inline";
    })
    btnHide.addEventListener("click",()=>{
        // if you want to display the first text use myText if you don't want to siplay anything use ""
        myParagraph.style.display = "none":
    })
</script>

showing extra text in hide/show button

2 Answers2