Hello Erik,
thank you for the reply.
Im not sure how i manged to toggle it.
But i cant seem to hide it again if that makes sense.
It shows it but then it wont hide it
I would like to also hide it once im done reading the hidden paragraphs
its all very complictaed becuase it shows it to be easy but then i added my paragraph to it and it doesnt work now
I am trying to keep it simple as i dont know about jqquery much - so this was working but i cant seem to hide it.
Or if there is a easier better way I am happy for that too
thank you
dan
Try changing the HTML so that it is welll-formed. When you added the paragraph you did so incorrectly and that may be the only cause of the problem. i.e.
You are still linking to jquery in your example so you may as well use jquery for this as shown in the two fiddles you and Mittenague posted.
In your attempt you are showing an element when that element has focus (which you have managed by adding a tab-index as usually only elements like anchors and form controls can get :focus). If you want to hide the styles afterwards then you would need to remove the focus by adding a link or other focusable element to take the focus away from the other element.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.collapse:focus {
outline: none;
}
.collapse > div {
display: none;
}
.collapse:focus div {
display: block;
}
.close{display:none;}
.collapse:focus .close{color:#000;text-decoration:none;display:inline-block}
.collapse:focus span{display:none;}
</style>
</head>
<body>
<div class="collapse" tabindex="1"> <i class="fa fa-arrow-right fa-2x" aria-hidden="true"> <span>Open</span> <a class="close" href="#">Close</a> </i>
<div>
<h1> Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi </p>
</div>
</div>
</body>
</html>
Of course that won’t work on mobile and you’d need to do something like this but not sure how reliable it will be.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.collapse:focus {
outline: none;
}
.collapse > div {
display: none;
}
.collapse:focus div {
display: block;
}
.collapse a{
color:#000;
text-decoration:none;
}
.close{display:none;}
.collapse:focus .close{display:inline-block}
.collapse:focus .open{display:none;}
</style>
</head>
<body>
<div id="collapse" class="collapse" tabindex="1"> <a href="#collapse" class="open"> <span><i class="fa fa-arrow-right fa-2x">Open</i></span></a> <a id="collapse2" class="close" href="#collapse2"> <i class="fa fa-arrow-right fa-2x" aria-hidden="true">Close</i></a>
<div>
<h1> Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi </p>
</div>
</div>
</body>
</html>
Remember though that once the user clicks on anything else in the page then :focus is also lost which may or may not be what you want.
The most reliable method is to add the click handler in js as per your original fiddle but I suppose it depends on how important the hidden message is.
I dont mind using jquery at all - I just dont know how to use it at the moment.
I guess what I was trying to do was build a FAQ system - Like an accordion?
I wanted to use a nice font awesome icon to show the expand and collapse
I have seen fiddles, but i tend to some how make the code not work after a while
I wil post back if i see any good ideas.
thank you
dan
