how to show and hide a div

Asked

Viewed 636 times

1

good I have this code that was supposed to give to show and hide a debt but it does not work me. ` 

    <div  class="btn-group custom-btn-group"   data-toggle="buttons">
                    <label class="btn btn-default active" >
                        <img src="img/3d-pie-chart-icon.png" alt="" />
                        <input id="circular" type="radio" class="form-control" name="circular"  value="0"   checked="checked"  />

                    </label>
                    <label class="btn btn-default"  >
                        <img src="img/SEO-icon.png" alt=""   />
                        <input  id="barras" type="radio" class="form-control"  name="barras" value="1"    />
                    </label>
                </div>$("#barrasgrafico").on("change", function () {
                   $("#bar_div").show();
                   $("#chart_div").hide();
               });
               $("#circulargrafico").on("change", function () {
                   $("#bar_div").hide();
                   $("#chart_div").show();
               });`
javascript

  • Where are the divs corresponding to ID’s bar_div and chart_div ?

  • 1

    Your javascript code is outside the tag <script></script>?

  • div are following the first div yes the code ta inside the javascript

1 answer

4

You have several problems in your code if it’s even your complete code, To start you are not separating your javascript from html, you must use a <script></script> is since you use jquery code must include the library before. if already done, see that you are wanting to hide/show objects that do not exist, for example: there is no circulargrafico.

I’ll leave an example of this process working:

$('input[type=radio]').change(function() {
  $("#div1,#div2").hide(); // seletores que serão escondidos
  var div = $(this).val(); // pega o valor do input radio que é o nome da div a ser mostrada.
  $('#' + div).show(); // mostra a div 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" value="div1" checked>Mostra div 1</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" value="div2">Mostra div 2</label>
</div>
<div id="div1">Conteúdo da Div 1</div>
<div id="div2">Conteúdo da Div 2</div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.