CODEWITHSUNDEEP
htmlcsstoggleanchorshow-hide
Paweł Skaba
Paweł Skaba

Reputation: 681

Single button to show/hide element with pure CSS

for the testing purposes, I was working on a solution which will allow me to show & hide specific div (id based) using only one button.

The jsifddle is here: link to code

the code looks like that:

CSS

body {
  font-family:'Trebuchet MS', sans-serif;
  font-size:0.5em;
  text-align:center;
}

.container {
  padding:1em;
  margin:0 auto;
  background:#efefef;
}

#added-value-1 {
  display:none;
}

#added-value-1:target {
  display:block;
}

#expand-btn-1 {
  margin:2em auto;
  text-align:center;
  padding:1em 2em;
  font-weight:bold;
  background:orange;
  display:inline-block;
}

HTML

<div class="container">
<h1>
Container for testing purposes. Below content will show/hide upon button click
</h1>
<p id="added-value-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper.
</p>
</div>

<a href="#added-value-1" id="expand-btn-1" title="Expand">Expand</a>

Correct me if i'm wrong, but probably it's impossible to achieve it without jquery & using one button? because of a single anchor?

Upvotes: 1

Views: 7905

Answers (2)

aryan
aryan

Reputation: 31

This is one way it can be done with HTML and CSS only.

body {
  font-family: sans-serif;
}
.accordion {
  position: relative;
}
.accordion .accordion-content {
  display: none;
}
.accordion input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.accordion .toggle-btn {
  color: #FFF;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;
  background-color: #000;
}
.accordion input[type="checkbox"]:checked ~ .accordion-content {
  display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <div class="accordion">
    <input type="checkbox" id="toggle" name="toggle">
    <label class="toggle-btn" for="toggle">Toggle</label>
    <p class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</body>
</html>

Please let me know if this helps.

Upvotes: 3

Awais
Awais

Reputation: 4902

This could help

.details,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .details {
  display: block;
}
<div>
  <a id="hide1" href="#hide1" class="hide">+ Expand</a>
  <a id="show1" href="#show1" class="show">- Expand</a>
  <div class="details">
    Content goes here.
  </div>
  
</div>

Upvotes: 12

Related Questions