Home  /  Questions  /  Question



72   96.1
Feb 20, 2013


How to show/hide divs with jQuery

Hi, I have another situation I need a solution for.  
There are three options in a select box. When anyone is selected the associated div needs to show. So: 

  • pdf is selected -> pdfinfo shows
  • doc is selected -> docinfo shows
  • xml is selected -> xmlinfo shows

What is the best way to approach this in jQuery?
 
<select id="groups">
   <option id="1" value="pdf">pdf document</option>
   <option id="2" value="doc">doc document</option>
   <option id="3" value="xml">xml document</option>
</select>

<div id="pdfinfo">pdf information is here</div>
<div id="docinfo">doc information is here</div>
<div id="xmlinfo">xml information is here</div>