Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Show More and Less content using javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.41k
    Comment on it

    Whenever we want to hide/show a particular content on our web page, we use show and hide functionality of javascript. 

    HTML code:
    
    <div>
     <p>
        This is my Blog
        </p>
        <p id="content"> <!-- This is where I want to add my description --></p>
       
    </div>
    
    
    <a id="Button" onclick="togglecontent();" href="javascript:void(0);">See More</a>
    
    
    jQuery code:
    
    var status = "less";
    
    function togglecontent()
    {
     
        var i="Here is the content which i want to show to the user";
        
        if (status == "less") {
            document.getElementById("content").innerHTML=i;
            document.getElementById("Button").innerText = "See Less";
            status = "more";
        } else if (status == "more") {
            document.getElementById("content").innerHTML = "";
            document.getElementById("Button").innerText = "See More";
            status = "less"
        }
    }
    
    

     

    Output:

    This is My Blog

    See More

    Now, On clicking the above 'See More' link, it will show the remaining content of the page in a following manner:

    This is My Blog

    Here is the content which i want to show to the user

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: