Databases
StackOverflow2013
Postsdbo
POHide/Show Div Based on Select Drop-Down Selections
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHide/Show Div Based on Select Drop-Down Selections
    text
    copied!<p>I am developing a WP theme options panel but this is not WP specific.</p> <p>I have two linked options:</p> <p>Option 1 = Columns Option 2 = Layout</p> <p>The selection made in option one dictates what is shown in option two:</p> <pre><code>&lt;!-- this controls the selection of columns --&gt; &lt;select name="column_select" id="column_select"&gt; &lt;option value="col1"&gt;1 column&lt;/option&gt; &lt;option value="col2"&gt;2 column&lt;/option&gt; &lt;option value="col3"&gt;3 column&lt;/option&gt; &lt;/select&gt; &lt;!-- this controls the selection of columns --&gt; &lt;!-- if '1 column' is selected this div is shown --&gt; &lt;div id="layout_select1"&gt; You only have one column! &lt;/div&gt; &lt;!-- if '2 column' is selected this div is shown --&gt; &lt;div id="layout_select2"&gt; &lt;input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' /&gt;col1 &lt;input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' /&gt;col2 &lt;/div&gt; &lt;!-- if '3 column' is selected this div is shown --&gt; &lt;div id="layout_select3"&gt; &lt;input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' /&gt;col1 &lt;input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' /&gt;col2 &lt;input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' /&gt;col2 &lt;/div&gt; </code></pre> <p>I have a working piece of jQuery that accomplishes most of what I need:</p> <pre><code>&lt;script&gt; $("#column_select").change(function() { ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide(); ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide(); ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide(); }); &lt;/script&gt; </code></pre> <p>The problem I am facing right now is that on page load all divs are show. They are only hidden once the user toggles the select menu option. </p> <p>How can I have the correct divs hidden on load?</p> <p><strong>UPDATE: I have had a few responses but I have likely not explained this properly. I do not want all the divs hidden upon loading the page. I just want the correct divs hidden upon load. So for example if the user selects '2 columns' he sees the second div. If he comes back to the options panel tomorrow or next month upon load he should still see the second div displayed. The jQuery must detect the currently selected option on load and show the appropriate div.</strong></p> <p>You can see what I mean here: <a href="http://jsfiddle.net/NickBe/RGXa7/3/" rel="nofollow">http://jsfiddle.net/NickBe/RGXa7/3/</a></p> <p>I am very new to javascript and jQuery so any help would be hugely appreciated. Thanks guys!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload