I found a code to show and hide content. It is a very easy code but the content disappears even if you click on the content in the box. There is no js just CSS. Please help me fix this problem.
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" >Some alarming information here</p>
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert {
display: none;
}
Welcome to the forums, @kidtific.
I think you’ll need to explain your issue more clearly. There is no <div> in the code you have provided.
The selectors only apply while the element still has focus.
To do this without javascript and have the element stay visible you could use the target pseudo class which is activated by a link to the element’s ID.
Alternatively there is the “Checkbox Hack”, look it up.
Hi kidtific,
For starters you have some errors in your html. You have several block level elements (div, p tags, and another h1) nested in your h1 tag.
Always validate your code if you are not sure what structures are allowed in html.
https://validator.w3.org/nu/
So let’s start by cleaning that up and set your h1 and alert div up like so…
<h1 class="ie">Internet Explorer <span class="open">(Download The Internet Explorer Add-On)</span></h1>
<div class="alert">
<h2>Set New Tab Page</h2>
<span class="close">(Close)</span>
<a href="#">Contact Us</a>
<p>This will allow automatic access to CapeBretonStart, on-the-fly, when opening up a new tab window.</p>
</div>
You’ll notice I removed the 64-ie.png image from the h1 also, we can set that up as a background image in the CSS.
The heading in the alert div is now an h2, you don’t need two h1 tags on that page.
You will also notice I renamed your spans to .open and .close since we will do away with the focus method that was causing you problems and use a small dose of JS to toggle your alert div.
Now we can remove all the p tags you were using for your numbered list of steps. We can use an actual Ordered List (OL) for that.
<ol>
<li>Click Tools in the menu bar on the top of your browser or the gear icon <img src="/images/pages/sethomepage/ie-gear-icon.png" width="18" height="18" alt=""> on the top right corner of the browser window.</li>
<li>Select Internet Options.</li>
<li>Click the General tab.</li>
<li>In the "Homepage" section, enter [https://www.xxx.com] in the text box.</li>
<li>Click OK.</li>
</ol>
Now for the CSS, you had gotten a little carried away with the use of the !important rule. Using !important is bad practice and should be avoided. It should only be used as a last resort when overriding rules from another source.
I removed the absolute positioning from the .span3 which is now .close. Then we can use inline-block on the h2 and span to keep them on one line.
I didn’t have access to your images so I just used a placeholder for the h1 background image, you need to replace that in the h1 styles.
Run this page in your browser and it should toggle the alert div for you now.
Hope that helps 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Internet Explorer Add-On</title>
<style>
h1.ie {
margin: 15px;
padding-left: 40px;
background: url(https://cdn.iconscout.com/public/images/icon/free/png-192/internet-explorer-logo-3749a399712a3977-192x192.png) no-repeat left center;
background-size: 24px;
}
span.open {
margin-left: 40px;
vertical-align: middle;
color: #0350FF;
cursor: pointer;
font-family: "Lato";
font-size: 15px;
font-weight: normal;
letter-spacing: 1px;
text-decoration: underline;
}
.alert {
margin: 15px 0px 25px 0px;
padding: 10px;
background: #f6f6f6;
border: 1px solid #cccccc;
border-radius: 3px;
}
.hide {
display: none;
}
.alert h2 {
display: inline-block;
margin: 0 0 15px;
color: #0350FF;
font-family: "Lato";
font-size: 17px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
span.close {
display: inline-block;
margin-left: 40px;
vertical-align: middle;
color: #0350FF;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}
.alert a {
display: block;
margin: 0 0 15px;
}
.alert p {
color: #333;
font-family: Century Gothic, sans-serif;
font-size: 15px;
font-weight: normal;
margin: 0 0 5px;
}
ol {
border-bottom: 1px solid #000;
}
ol li {
margin: 15px 0;
}
</style>
</head>
<body>
<h1 class="ie">Internet Explorer <span class="open">(Download The Internet Explorer Add-On)</span></h1>
<div class="alert">
<h2>Set New Tab Page</h2>
<span class="close">(Close)</span>
<a href="#">Contact Us</a>
<p>This will allow automatic access to CapeBretonStart, on-the-fly, when opening up a new tab window.</p>
</div>
<ol>
<li>Click Tools in the menu bar on the top of your browser or the gear icon <img src="/images/pages/sethomepage/ie-gear-icon.png" width="18" height="18" alt=""> on the top right corner of the browser window.</li>
<li>Select Internet Options.</li>
<li>Click the General tab.</li>
<li>In the "Homepage" section, enter [https://www.xxx.com] in the text box.</li>
<li>Click OK.</li>
</ol>
<script>
// Hide alert on page load
var alert = document.querySelector(".alert");
alert.classList.add("hide");
// Open alert div
var open = document.querySelector(".open");
open.onclick = function() {
alert.classList.remove("hide");
}
// Close alert div
var close = document.querySelector(".close");
close.onclick = function() {
alert.classList.add("hide");
}
</script>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.