how to show and hide a div [duplicate]

Question

how to show and hide a div [duplicate]

Navigation

#1 by (4 votes)

1

Well, I have this code that I'm supposed to give to show and hide a div but it's not working for 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

asked by anonymous 03.11.2015 / 19:40

1 answer

Upload files to different servers Separate string from end to end with substr php

score 4 · Answer 1

You have several problems with your code if it is your complete code, to start you're not separating your javascript from the html, you should use <script></script> is since you use jquery code should include the library before. if it has already been done, see that you are wanting to hide / show objects that do not exist, for example: circulargrafico does not exist.

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><divclass="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>