Fifth.html

<html>
<head></head>
<body>
    
    <div class ="article">
        <img src="" height="200" width="200" alt="no img"/>
        <h3>Article 1</h3>
        <a href="#" class="readmore">Read more</a>
        <p class = "description">This is article 1 description</p>
    </div>

    <div class ="article">
            <img src="" height="200" width="200" alt="no img"/>
            <h3>Article 2</h3>
            <a href="#" class="readmore">Read more</a>
            <p class = "description">This is article 2 description</p>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script>
                var jQ = $.noConflict();
                jQ(document).ready(function(){
                    jQ('.description').hide();// This hides the description(paragraph).
                    jQ('.readmore').click(function(e){
                        e.preventDefault();// This prevents the default function of readmore(anchor tag).
                    jQ(this).next().toggle(2000);// This toggles the next sibling of readmore(anchor tag).
                    });
                });
            </script>
</body>
</html>