CODEWITHSUNDEEP
javascriptjquery
Nick
Nick

Reputation: 1999

Hide/Show Div Based on Select Drop-Down Selections

I am developing a WP theme options panel but this is not WP specific.

I have two linked options:

Option 1 = Columns Option 2 = Layout

The selection made in option one dictates what is shown in option two:

<!-- this controls the selection of columns -->
<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>


<!-- this controls the selection of columns -->

<!-- if '1 column' is selected this div is shown -->
<div id="layout_select1">
    You only have one column!
</div>

<!-- if '2 column' is selected this div is shown -->
<div id="layout_select2">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />col2
</div>

<!-- if '3 column' is selected this div is shown -->
<div id="layout_select3">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />col2
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />col2
</div>

I have a working piece of jQuery that accomplishes most of what I need:

<script>
    $("#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();
    });
</script>

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.

How can I have the correct divs hidden on load?

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.

You can see what I mean here: http://jsfiddle.net/NickBe/RGXa7/3/

I am very new to javascript and jQuery so any help would be hugely appreciated. Thanks guys!

Upvotes: 2

Views: 6692

Answers (7)

Jayendra
Jayendra

Reputation: 52809

i would agree with Stanley to assign css class to the divs as the columns options and use as -

$("#column_select").change(function() {         
    $('div[id^=layout_select]').hide();
    $('.'+this.value).show();  
});

you can set the display:none options for default.

Demo - http://jsfiddle.net/RGXa7/10/

Upvotes: 0

campino2k
campino2k

Reputation: 1671

<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $( "#column_select" ).val( 'col1' ).trigger( 'change' ); // reset the value for Browsers caching Form Element States
        $( '#layout_select2, #layout_select3').hide();
    });

    $("#column_select").change(function() {
        $( '#layout_select1, #layout_select2, #layout_select3' ).hide();
        $( '#layout_select' + $( this ).val().charAt(3) ).show();
    }); 

</script>

Upvotes: 1

Anupam
Anupam

Reputation: 8016

Trigger the select change function on document.ready()

$(document).ready(function(){
   $("#column_select").trigger('change');
});

This will show/hide appropriate div

Upvotes: 1

Sivakumar
Sivakumar

Reputation: 890

set the display to "none" for the divs which you want to hide similar to 

<div id="layout_select2" style="display:none">

Upvotes: 0

Sedat Başar
Sedat Başar

Reputation: 3798

<script>
    //you can initially hide your divs
    $("#layout_select1").hide();
    $("#layout_select2").hide();
    $("#layout_select3").hide();

    $("#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();
    });
</script>

Upvotes: 1

Stanley Stuart
Stanley Stuart

Reputation: 1145

You could create a CSS class and attach it to all the divs. You can use the visibility:hidden property of CSS if you want the divs to be invisible but still take the appropriate amounts of space on the screen, or display:none if you want them completely invisible.

I believe your existing code should still work should you use display:none. DIVs are hidden, but your jquery will show them once the option is selected.

Upvotes: 0

Damon Skelhorn
Damon Skelhorn

Reputation: 1511

You need to hide then once the DOM has loaded.

<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $('#layout_select2, #layout_select3').hide();
    });

    $("#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();
    });

</script>

Upvotes: 2

Related Questions