Could you point a way to hide/show a division under circunstaces by using Bootstrap?

Hi Experts

Could you point a way to hide/show  a division  under circunstaces by using Bootstrap?

 Accordingly to:
img001
By fiiling Houve Custo with Sim (Yes) the element Custo and the division with the 02 elements
Houve Reembolso?  and Reembolso must appear.

  <!-- EF Set/2016  - div-->
                                    <div id="divReembolso" class="hide">
                                    <div class="row">         
                                        <!-- EF Set/2016  - Houve Reembolso?-->
                                        <div class="col-xs-4 mb20">
                                            <label for="houve_reembolso" class="field-label text-muted mb10">Houve Reembolso?</label>
                                            <label for="houve_reembolso" class="validar field select">
                                                <select name="houve_reembolso" id='houve_reembolso'>
                                                    <option value="">Selecione ...</option>
                                                    <option value="S">Sim</option>
                                                    <option value="N">Não</option>
                                                </select>
                                            </label>
                                        </div>
                                         <!-- EF Set/2016 FIM  - Houve Reeembolso -->
                                   
                                    
                                 <!-- EF Set/2016  - Reembolso?-->
                                        <div class="col-xs-4 mb20 reembolso" style="display: none;">
                                            <label for="reembolso" class="field-label text-muted mb10">Reembolso</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-money c-gray"></i>
                                                </span>
                                                <span class="validar">
                                                    <input type="text" name="reembolso" id="reembolso" class="form-control gui-input br-light light" placeholder="">
                                                </span>
                                            </div>
                                        </div>
                                    <!-- EF Set/2016 FIM  - Reeembolso -->
                                      </div>
                        
                                    </div>
                                    <!-- EF Set/2016 FIM  - div -->

Open in new window



jquery (doesn't running)

$(function () {
      

        $("#houve_custo").change(function() {
            var serv = $( "#houve_custo option:selected" ).text();

            if (serv != 'Sim')
                $(".custo").hide();
                
                //EF Set/2016
                $("#divReembolso").hide();
                //$("#divReembolso").addClass('hidden');
                //$("#houve_reembolso").hide();
                //$(".reembolso").hide();
                //EF Set/2016 - FIM
            else
                $(".custo").show();
 
                //EF Set/2016
                $("#divReembolso").removeClass('hidden');
                //$("#divReembolso").show();
               //$("#houve_reembolso").show();
                //$(".reembolso").show();
                //EF Set/2016 - FIM
        });

Open in new window


Could you point what must be changed to make it run?

Thanks in advance
Eduardo FuerteAsked:
Who is Participating?
 
Julian HansenCommented:
var serv = $( "#houve_custo option:selected" ).text();

Open in new window

You can also do
var serv = $( "#houve_custo" ).val();

Open in new window

0
 
Eduardo FuerteAuthor Commented:
Sorry


I just omit the {  } in the jquery else. That's the problem.
 if (serv != 'Sim')
            {
                $(".custo").hide();
                $("#divReembolso").hide();
            }         
            else
            {
                $(".custo").show();
                $("#divReembolso").show();
            }

Open in new window

Open in new window

It runs that way
0
 
Eduardo FuerteAuthor Commented:
Thanks !
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.