Question

Hi I have some javascript which works in a standalone web page with 5 divs, what it does is when an option is selected it will show a div and hide the others based on drop down selection.Basically what the code does is when a sector is selected on the drop down that corresponding DIV will be displayed eg pubs.

The problem I am having is in the web page I want this working on I have lots of Div tags and when the page loads all the Divs on the page are hidden, obviously I don’t want this.

Any help would be much appreciated

The code that hides all the divs on page load is

$('div').not(name).hide();

Is there a way of solving this problem I cant see how I am going to get round it at the moment.?

JS

<script>

    $(document).ready(function () {

        function showTab( name ) 
        {
        name = '#' + name;

        $('div').not(name).hide();

        $(name).show();
    }

    $('#dropdown').change( function() {

        showTab( $( this ).val() );
    });

    showTab( $('#dropdown').val() );

}); 

HTML

<form>
          <p>
          <select id="dropdown" name="dropdown">
              <option value="Pub-Chains" selected="selected">Pubs </option>
              <option value="Councils">Councils </option>
              <option value="Property">Property </option>
              <option value="Various">Various </option>
              <option value="Universitys">Universitys </option>
          </select>
          </p>
     </form>

My Div’s are named like so

Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"

Answer 1

You have to group up the div you want to participate in show hide to separate them from other divs on the page. You can assign a common class to them and use that class to hide them.

Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"

$('div.opt').hide();