Untitled

<!doctype html>
<html>
    <head>
        <title>News</title>
        <style>
            html {
                font-family: "Arial";
            }
            .title {
                font-family: "Segoe UI Light";
                font-size: 200%;
            }
        </style>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(
                function(){
                    //Hide the article's bodies
                    $(".article .body").hide();
                    //Add the read body button
                    $("#container").find(".article .actions").prepend("<button class='readbody'>Read Body</button>");
                    //Add the onclick action to the button
                    $(".actions .readbody").click(
                        function(event){
                            var mybody = this.parentNode.parentNode;
                            while (mybody = mybody.previousSibling) {
                                if (mybody.className == "body") break;
                            };
                            $(mybody).toggle();
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <div id="container">
            <div class="article">
                <div class="title">
                    Title #1
                </div>
                <div class="summary">
                    Summary #1
                </div>
                <div class="body">
                    Article body #1
                </div>
                <div class="actions">
                    <button>Comment</button>
                    <button>Share</button>
                </div>
            </div>
            <hr/>
            <div class="article">
                <div class="title">
                    Title #2
                </div>
                <div class="summary">
                    Summary #2
                </div>
                <div class="body">
                    Article body #2
                </div>
                <div class="actions">
                    <button>Comment</button>
                    <button>Share</button>
                </div>
            </div>
            <hr/>
            <div class="article">
                <div class="title">
                    Title #3
                </div>
                <div class="summary">
                    Summary #3
                </div>
                <div class="body">
                    Article body #3
                </div>
                <div class="actions">
                    <button>Comment</button>
                    <button>Share</button>
                </div>
            </div>
        </div>
    </body>
</html>