How to make a tag appear when you click a checkbox

Question

How to make this tag <h3> appear when a checkbox is clicked? Right now it is hidden.

<h3 class="bark">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>

css:

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked  {
visibility: visible  
}

Answer 1

.bark{ 
  visibility: hidden
}

input[type="checkbox"]:checked + h3.bark  {
visibility: visible  
}

<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>

Answer 2

Without using scripting language there is one trick:

.bark{ 
  visibility: hidden;
}

input[type="checkbox"]:checked + .bark {
   visibility: visible;
}

<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>

You should put h3 after input. And use + sign to make h3 visible.

Working Fiddle

Answer 3

function checkInput(cbox) {
      if (cbox.checked) {
          document.getElementById('check_box').style.visibility='visible';
        }
      else{
            document.getElementById('check_box').style.visibility='hidden';
       }
 }

#check_box{ 
  visibility: hidden;
}

<h3 id="check_box">Bark Bark</h3>
<input type="checkbox" class="title"  onclick="checkInput(this);">Hear a dog