CODEWITHSUNDEEP
javascriptjqueryhtml
Maria Nolorbe
Maria Nolorbe

Reputation: 357

Hide DIV when page loads based on select field value

I have the following script that hides/shows 2 div's based on the contents of a select ID's value when it's changed. This works fine.

<script type="text/javascript">
        $(function () {
            $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
        });
    </script>

What I'm trying to do is perform this same action, except not only on CHANGE, but when the page loads as well. So when I enter the page, if FEATURED is value then correct DIV will already be hidden and shown.

I tried the following, but it didn't work.

  <script type="text/javascript">
$( document ).ready(function() {
                $("#ue_package").change(function () {
                    if ($(this).val() == "Featured") {
                        $(".image_container").hide();
                        $(".image_container_featured").show();              
                    } else if ($(this).val() == "Standard") { 
                        $(".image_container").show();
                        $(".image_container_featured").hide();              
                    }
                });
            });
        </script>

Upvotes: 2

Views: 2706

Answers (5)

Sanjay Kumar N S
Sanjay Kumar N S

Reputation: 4739

Define the toogling as a function. Note replace $(this) with the element id selector and call that function in both the onchange and body onload like this:

$( document ).ready(function() {
   showHide();
   $("#ue_package").change(function () {
        showHide();
   });
});


function showHide() {
    if ($('#ue_package').val() == "Featured") {
        $(".image_container").hide();
        $(".image_container_featured").show();              
    } else if ($('#ue_package').val() == "Standard") { 
        $(".image_container").show();
        $(".image_container_featured").hide();              
    }
}

Upvotes: 1

Theo Itzaris
Theo Itzaris

Reputation: 4671

i would suggest this, as i changed a little the logic, i put the images into divs and i play with the active class.

into javascript:

$( document ).ready(function() {
            if ($("#ue_package").val() == "Featured") {
                $('.container:eq(0)').addClass('active');
            $('.container:eq(1)').removeClass('active');
        } else if ($("#ue_package").val() == "Standard") { 
                $('.container:eq(0)').removeClass('active');
                    $('.container:eq(1)').addClass('active');
        }
}

into css:

.container{
  display:none
}

.container.active{
  display:block;
}

into html:

<div class="container">
  <img class='image_container' src="something"/>1
</div>

<div class="container">
  <img class='image_container' src="something"/>2
</div>

hope helps good luck.

Upvotes: 0

Neeraj Sharma
Neeraj Sharma

Reputation: 588

This is not worked buz change event is fires when, any action perform.

so there is two options One:

<script type="text/javascript">
$( document ).ready(function() {
 showHidediv();
            $("#ue_package").change(function () {
               showHidediv();
        });

function showHidediv()
     {
 if ($("#ue_package").val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($("#ue_package").val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
 }
    </script>

second method:

$( document ).ready(function() {
       $("#ue_package").change();


 $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
 });

For more about change()

Upvotes: 0

Matt
Matt

Reputation: 2869

<script type="text/javascript">
$( document ).ready(function() {
    if ($("#ue_package").val() == "Featured") {
            $(".image_container").hide();
            $(".image_container_featured").show();              
        } else if ($("#ue_package").val() == "Standard") { 
                $(".image_container").show();
                $(".image_container_featured").hide();              
        }
});
</script>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Just invoke/trigger the change function in your document.ready event handler function after binding the change event to the same textbox.

$("#ue_package").change();

Upvotes: 0

Related Questions