CODEWITHSUNDEEP
javascriptjquery
user3201500
user3201500

Reputation: 1618

Close other div and keep selected one open on dropdown in jquery

i want to hide all the siblings

I have a layout like this 

                <label class=""><b>Design Level</b>
                    <select class="static-website">
                            <option>--------Select--------</option>
                            <option value="basic-design">Basic Design</option>
                            <option value="business-design">Business Design</option>
                            <option value="creative-design">Creative Design</option>
                    </select>
                </label>
                 <br/>

            <div class="static-basic-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Basic Static Box -->

             <div class="static-business-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="10" />
                </label>

             </div><!-- End of BUSINESS Static Box -->

             <div class="static-creative-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Creative Static Box -->

We have our jquery written like this:

=

$(".static-website select").on('change',function(e){
    var selectedopt=$(this).val();
    $('.static-'+selectedopt).siblings().hide(); (this is not working)
    $('.static-'+selectedopt).show();

});

But it seems like $('.static-'+selectedopt).siblings().hide(); this is not working.

Thank you!

Upvotes: 0

Views: 177

Answers (1)

imtheman
imtheman

Reputation: 4843

The problem was your on change selector $(".static-website select") gets you all select tags under .static-website, but what you wanted was .static-website itself. Also, you'll probably want to filter the siblings for just the divs.

$(".static-website").on('change', function(e) {
  var selectedopt = $(this).val();
  $('.static-' + selectedopt).siblings("div").hide();
  $('.static-' + selectedopt).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class=""><b>Design Level</b>
  <select class="static-website">
    <option>--------Select--------</option>
    <option value="basic-design">Basic Design</option>
    <option value="business-design">Business Design</option>
    <option value="creative-design">Creative Design</option>
  </select>
</label>
<br/>

<div class="static-basic-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Basic Static Box -->

<div class="static-business-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="10" />
  </label>

</div>
<!-- End of BUSINESS Static Box -->

<div class="static-creative-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Creative Static Box -->

Upvotes: 1

Related Questions