Show/Hide CSS 2 of them on same page

HTML & CSS
1

I have this show/hide code that works fine. When I want to do 2 of these on the same page, there is a conflict. I am sure there is a way to alter the style rather than having to duplicate it and changing the names.

Your help would be appreciated. Thank you.


<style>
        :checked ~ .btn-default, #show, .checkbox {
        display: none;
    }
    :checked ~ #show {
        display: block;
        color:blue;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif;
    }
    .show-text:after {
        content:"Show Menus for details";
        color:blue;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif;
    }
    :checked + .show-text:after {
        content:"";
    }
    .second-label, .show-text {
        text-decoration: underline;
        cursor: pointer;
    }
</style>


<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
</label>
<div id="show">
----content #1 -----

<label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>


How to do -------content #2 -------------------
2

You’ll need to increment the ids of the inputs and labels in the html as they need to be unique but in the css you can just use classes for all of them.

e.g.


<div class="wrap">
  <input id="checkbox" type="checkbox" class="checkbox">
  <label for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
  </label>
  <div class="show">
    ----content #1 -----
    <label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
  </div>
</div>

<div class="wrap">
  <input id="checkbox2" type="checkbox" class="checkbox">
  <label for="checkbox2" class="btn btn-default btn-sm"> <span class="show-text"></span>
  </label>
  <div class="show">
    ----content #2 -----
    <label for="checkbox2" class="second-label btn btn-default btn-sm">Close</label>
  </div>
</div>

<div class="wrap">
  <input id="checkbox3" type="checkbox" class="checkbox">
  <label for="checkbox3" class="btn btn-default btn-sm"> <span class="show-text"></span>
  </label>
  <div class="show">
    ----content #2 -----
    <label for="checkbox3" class="second-label btn btn-default btn-sm">Close</label>
  </div>
</div>

.wrap {
  margin: 1rem;
  border-bottom: 1px solid red;
}
:checked ~ .btn-default,
.show,
.checkbox {
  display: none;
}
:checked ~ .show {
  display: block;
  color: blue;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}
.show-text:after {
  content: "Show Menus for details";
  color: blue;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}
:checked + .show-text:after {
  content: "";
}
.second-label,
.show-text {
  text-decoration: underline;
  cursor: pointer;
}
3

Thanks for replying.

This is what the top of the page looked like before:

image
image767Ă—37 2 KB

After the Show Munus for details there is no gab, the link lays right on the light gray line which starts the page.

This is what it looks like now with the new code:

image
image775Ă—85 2.12 KB

And there is too much spacing above the link and too much below the link.

Is this solvable (remove the spacing) or is it because of having more divs? Also, don’t want the red line.

Thanks

4

You can style it how you like. :slight_smile:

Just remove the rules I put in place for the wrap. I only added those so I could see what was going on as you didn’t post all the css.

You’ll need the wrap html on each block though otherwise your checkbox hack will target all the siblings.

You shouldn’t have any problems styling it as you wish :slight_smile:

1 Like