CODEWITHSUNDEEP
htmlcss
Frnnd Sgz
Frnnd Sgz

Reputation: 328

Is there a way to show hide elements (non adjacents) with css3

I need to make a kind of fake navigation that shows diferents sections when clicking on elements of a list...but no javascript is allowed.

I have make this approach

    <style type="text/css">
   body {
      display: block;
   }

   #closquer {
      display: inline-block;
   }

   :nth-child(1):focus ~ #lotext {
      display: block;
   }

   #lotext {
      display: none
   }
</style>
</head>

<body>
   <ul id="closquer">
      <li class="span3" tabindex="0">Section 1</li>
   </ul>
  <div id="lotext">Text Section 1</div>

This don't work, because the elements are no adjacent see demo

By the way if elements are adjacent..it works

<style type="text/css">
   body {
      display: block;
   }

   #closquer {
      display: inline-block;
   }

   :nth-child(1):focus ~ #lotext {
      display: block;
   }

   #lotext {
      display: none
   }
</style>
</head>

<body>
   <ul id="closquer">
      <li class="span3" tabindex="0">Section 1</li>
      <p id="lotext">Text Section 1</p>
   </ul>

See other demo

Is there a way to show/hide non adjacent elements with css3?

Upvotes: 0

Views: 75

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105923

label and input can be used too, it can allow to open a few boxe :

#a:checked ~#boxA,
#b:checked ~#boxB,
#c:checked ~#boxC,
#d:checked ~#boxD,
#e:checked ~#boxE,
#f:checked ~#boxF,
#ab:checked ~#boxeA,
#bb:checked ~#boxeB,
#cb:checked ~#boxeC,
#db:checked ~#boxeD,
#eb:checked ~#boxeE,
#fb:checked ~#boxeF
{display:block;}
div, input {
  float:left;
  border:solid;
  display:none;
  }
nav ~ nav ~div {float:none;}
label {margin:1em;}
hr {clear:both;}
#a:checked ~ nav  [for="a"],
#b:checked ~ nav  [for="b"],
#c:checked ~ nav  [for="c"],
#d:checked ~ nav  [for="d"],
#e:checked ~ nav  [for="e"],
#f:checked ~ nav  [for="f"],
#ab:checked ~nav  [for="ab"],
#bb:checked ~nav  [for="bb"],
#cb:checked ~nav  [for="cb"],
#db:checked ~nav  [for="db"],
#eb:checked ~nav  [for="eb"],
#fb:checked ~nav  [for="fb"]
{color:red}
  
<!-- checkbox allow multiple selection -->
<input id="a" type="checkbox" /><input id="b" type="checkbox" /><input id="c" type="checkbox" /><input id="d" type="checkbox" /><input id="e" type="checkbox" /><input id="f" type="checkbox" />
  <nav><label for="a">box A</label><label for="b">box B</label><label for="c">box C</label><label for="d">box D</label><label for="e">box E</label><label for="f">box F</label></nav>
  <div id="boxA"> Box A to show or hide</div>
  <div id="boxB"> Box B to show or hide</div>
  <div id="boxC"> Box C to show or hide</div>
  <div id="boxD"> Box D to show or hide</div>
  <div id="boxE"> Box E to show or hide</div>
  <div id="boxF"> Box F to show or hide</div>
<hr/>
  <!-- radio and name attributes allow 1 or more selection-->
  <input id="ab" type="radio" name="box" /><input id="bb" type="radio" name="box" /><input id="cb" type="radio" name="box" /><input id="db" type="radio" name="box" /><input id="eb" type="radio" name="box" /><input id="fb" type="radio" name="boxextra" />
  <nav><label for="ab">boxe A</label><label for="bb">boxe B</label><label for="cb">boxe C</label><label for="db">boxe D</label><label for="eb">boxe E</label><label for="fb">boxe F as extra</label></nav>
  <div id="boxeA"> Boxe A to show or hide</div>
  <div id="boxeB"> Boxe B to show or hide</div>
  <div id="boxeC"> Boxe C to show or hide</div>
  <div id="boxeD"> Boxe D to show or hide</div>
  <div id="boxeE"> Boxe E to show or hide</div>
  <div id="boxeF"> Boxe F to show or hide</div>

Unlike :target methode, it will not take the focus.

Upvotes: 0

ZEE
ZEE

Reputation: 5849

you can use the powerful target for this like the following : 

section:not(:target) > a {
  background-color: #ccc;
}
section:target > a {
  background-color: white;
  border-bottom-color: #fff;
}
section:not(:target) > div { z-index: -2; }
section:target > div { z-index: -1; }

here is an exemple I made it for you :

Live DEMO

Upvotes: 2

Related Questions