I want to create hyperlinks on a web page where, when clicking, will open different DIVs

Question

My brain is completely fried on this one, So I'll go here.

I have these "hashtag entries" (for lack of a better phrase) on my CSS file:

#wrap20 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}

#wrap21 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}

#wrap22 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}​

They all look alike, yes, but the <div id> containers are holding different groups of images.

What I'm trying to do is create hyperlinks within the same page where, one link will open one div container. If I click on another hyperlink, it will close the previous one and open the new one, and so on, and so forth.

I've tried different JavaScript codes, and in all honesty, a shotgun blast to the head probably would deliver a more pleasurable sensation than trying to interpret and transpose the examples that I've found all over the web (By no means I am a script-writer, and I'm not wired to be one.)

Any ideas? I need a lot of handholding with this one. The more specific the explanation, the better.

Answer 1

With pure CSS, as well as making use of target of anchor tags a, you can also achieve it using input type="radio", as giving them the same name will only let the user trigger one option at one time, also hiding the radio input with display:none and let the label for"" control the triggering process, like in this:

JS Fiddle 1

and certainly you can layout the container divs and the radio inputs however you want as long these radios and divs are having same parent, check out these JS Fiddle 2, and JS Fiddle 3

Full Code:

.radios {
  display: none;
}
.divs {
  max-height: 0;
  overflow: hidden;
  background-color: orange;
}
.divs div {
  margin: 5px;
}
label.tabs {
  display: block;
  line-height: 30px;
  background-color: green;
  margin: 1px 0;
  padding-left: 20px;
  color: white;
  cursor: pointer;
}
#tab-1:checked ~ #div-1 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}
#tab-2:checked ~ #div-2 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}
#tab-3:checked ~ #div-3 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}

<input type="radio" id="tab-1" name="rad" class="radios">
<label for="tab-1" class="tabs">Tab ONE</label>
<div id="div-1" class="divs">
  <div>
    Ice cream croissant caramels chupa chups marzipan cookie pudding. Tart marzipan lemon drops apple pie jelly dessert sugar plum cheesecake cake. Gingerbread topping ice cream sugar plum halvah icing.
  </div>
</div>
<input type="radio" id="tab-2" name="rad" class="radios">
<label for="tab-2" class="tabs">Tab TWO</label>
<div id="div-2" class="divs">
  <div>
    Halvah danish danish. Cookie dragée sesame snaps marzipan pastry sesame snaps chocolate cake danish cotton candy. Ice cream pie cake cake cheesecake muffin sesame snaps. Sesame snaps gingerbread ice cream tiramisu sesame snaps caramels tootsie roll.
  </div>
</div>
<input type="radio" id="tab-3" name="rad" class="radios">
<label for="tab-3" class="tabs">Tab THREE</label>
<div id="div-3" class="divs">
  <div>
    Toffee macaroon pudding ice cream cookie topping. Pastry gingerbread marshmallow chupa chups icing jelly beans.
  </div>
</div>

---

UPDATE:

Achieving same above with :target for a tags, less DOM elements, less CSS and no need for the "target" element to be in the same parent with the anchor :

JS Fiddle 4

Also this JS Fiddle 5 and this JS Fiddle 6

Full Code:

.divs {
  max-height: 0;
  overflow: hidden;
  background-color: orange;
}
.divs div{
  margin:5px;
}

a.tabs {
  display: block;
  line-height: 30px;
  background-color: green;
  margin: 1px 0;
  padding-left: 20px;
  color: white;
  text-decoration:none;
  cursor: pointer;
}
:target{
  max-height: 1000px;
  transition: all 1s ease-in-out;
}

<a href="#div-1" class="tabs">Tab ONE</a>
<a href="#div-2" class="tabs">Tab TWO</a>
<a href="#div-3" class="tabs">Tab THREE</a>
<div id="div-1" class="divs">
  <div>
    Ice cream croissant caramels chupa chups marzipan cookie pudding. Tart marzipan lemon drops apple pie jelly dessert sugar plum cheesecake cake. Gingerbread topping ice cream sugar plum halvah icing. Sesame snaps cotton candy dragée halvah candy canes
    gummies bonbon macaroon tootsie roll. Muffin tootsie roll wafer. Candy candy canes sweet jelly chocolate bar sweet roll brownie. Chocolate bar dragée topping brownie.
    <br> Candy oat cake wafer candy cookie apple pie. Chocolate liquorice gummi bears tiramisu topping pastry topping dessert jelly beans. Halvah cookie lemon drops oat cake oat cake gingerbread. Pudding sesame snaps croissant powder wafer pudding wafer.
    Tootsie roll soufflé fruitcake macaroon chocolate bar marzipan jujubes. Toffee lollipop muffin brownie jelly beans fruitcake. Tiramisu topping donut chocolate cake fruitcake.
  </div>
</div>
<div id="div-2" class="divs">
  <div>
    Halvah danish danish. Cookie dragée sesame snaps marzipan pastry sesame snaps chocolate cake danish cotton candy. Ice cream pie cake cake cheesecake muffin sesame snaps. Sesame snaps gingerbread ice cream tiramisu sesame snaps caramels tootsie roll. Ice
    cream pastry danish ice cream. Gingerbread chocolate powder jujubes marshmallow croissant.
  </div>
</div>

<div id="div-3" class="divs">
  <div>
    Toffee macaroon pudding ice cream cookie topping. Pastry gingerbread marshmallow chupa chups icing jelly beans. Lemon drops cheesecake chocolate bar halvah soufflé. Cheesecake marzipan fruitcake donut lemon drops topping brownie. Croissant sugar plum
    gummi bears sweet roll lollipop. Gummi bears fruitcake cake candy canes lemon drops pie chupa chups lemon drops.
  </div>
</div>