The Comments for this blog page are in the source of the page. 1Your first step

ID: 3701585 • Letter: T

Question

The Comments for this blog page are in the source of the page.

1Your first step is to hide the comments using CSS. Do not use JavaScript.

This is an important principle: render the page using HTML markup and CSS in the best possbile state. Do not rely on JS to format your page as it should look like on start up.* This is sometimes unavoidable but you should be forced into this not just simply default to this convinient technique.

2 Add a button or "button link" that when clicked, will reveal the comments on the page. As before, be sure to start writing your code within the sabio.page.startUp function and use click handlers to do the work you need.

Bonus Have the browser scroll the page down to the the top of the comments section. The title of the comments area should be scrolled to so that is just about at the top of the browser screen.

The Best Blog Post Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu sapien scelerisque, dictum nisi vehicula, tincidunt nunc. Quisque ut lacinia ipsum, ut fermentum nisl. Donec et volutpat lectus. Cras tincidunt imperdiet tincidunt. Mauris consequat vestibulum euismod. Phasellus velit mauris, laoreet ut lacus sagittis, ultricies dapibus arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec nulla risus, imperdiet ut urna pulvinar, cursus dignissim turpis. Curabitur cursus vehicula facilisis. Donec odio enim, blandit id cursus vel, pretium et lectus. Curabitur id eros rhoncus, bibendum sem et, ultricies magna. Suspendisse placerat semper pellentesque. Aenean varius molestie elit, at elementum neque rutrum luctus. Mauris at nisi in neque aliquam pulvinar. Aenean eu aliquet nisl.

There are 6 comments

Comment title

By admin | Today, 12:31

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Comment title

By admin | Today, 12:31

Comment title

By admin | Today, 12:31

Comment title

By admin | Today, 12:31

Comment title

By admin | Today, 12:31

Comment title

By admin | Today, 12:31

Explanation / Answer

Code to view / hidden comments:
Here I have added all the comments of page inside div tag that is hidden or shown based on the click of the button.
By default, the display of the div element is blocked initially. So placing the contents inside the <div> tag ,
will allow you to initially hide the content. Also do check what is the tag inside which the 'COMMENT SECTION'is placed in the source file
As it's not mentioned in the question, I have place the comment content in the div tag

This code makes use of the inline CSS

<html>
<head>
<style>
#dispcomment{
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 60px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#dispcomment {
display: block;
}
</style>
</head>

<input type="text" value="VIEW COMMENTS">
<div id="dispcomment">

<p>
Comment title
<br>
By admin | Today, 12:31

Reply
</p>
</div>
</html>

Copy the code to a .html file and run.

Navigate

The Command Window is the MATLAB window where we enter commands. True or False T

The Commerce Clause of the Constitution limited the right of the federal governm

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

The Comments for this blog page are in the source of the page. 1Your first step

Question

Explanation / Answer

Related Questions

Navigate