CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
abcd
abcd

Reputation: 109

Hiding/showing div by selecting dropdown and button click

i want to select a value from my dropdown, and then, when i click a button, it hides certain div and show another div. I'm baffled on how to achieved this. so i have two div.

<div id="div1"> some content </div>
<div id="div2"> some content </div>
@Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as SelectList, "-- REFERENCE TYPE -- SHOW ALL", new { @id = "testID" })

and here is my button.

<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />

and this is my function. I try to do it, 

function abc() {
    if ('#testID' != 1) {
        $('#div1').show();
        $('#div2').hide();
    } else if (testID != 2) {
        $('#div1').show();
        $('#div2').hide();
    } else { 
        $('#div1').hide();
        $('#div2').hide();
    }
}

I hope my question is clear.

Upvotes: 1

Views: 971

Answers (1)

Stan Liu
Stan Liu

Reputation: 210

I am unsure with what you want to do with the value from the dropdown input, but it is not too relevant to affecting the state of the divs if you are only interacting with the button to affect the divs.

In terms just hiding the div, you can apply a class "hidden" that hides the element or not with CSS.

Then you can toggle the div and whether or not it appears by clicking on the button with jQuery by adding and removing that hidden class with the toggleClass.

Let me know if you have any more questions.

$(document).ready(function() {
  $(".btn").on("click", function() {
    $("#div1").toggleClass("hidden");
    $("#div2").toggleClass("hidden");
  })
})
.hidden {
  display: none;
 }
<div id="div1"> some content </div>
<div id="div2" class="hidden"> some content </div>

<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />

Upvotes: 1

Related Questions