javascript - I have a popover on a form page along with a hidden element to be displayed depending on user input. Both are using jquery -

i have popover on form page along hidden element displayed depending on user input. both using jquery display. popover works version 1.12.0, not 1.7.1 , hidden element display 1.12.0 not 1.7.1. using both links googleapis not work either. have solutions this? thank you.

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>         <h4 class=""><a href="javascript://" title="dismissible popover" data-toggle="popover" data-trigger="focus" data-content="popover content">do require specific</a></h4>                 <div class="btn-group" data-toggle="buttons">                     <label class="btn btn-default">                         <input type="radio" name="radiogroup7" value="radio" id="radiogroup7_0" required="required" tabindex="9" title="">                         yes</label>                     <label class="btn btn-default">                         <input type="radio" name="radiogroup7" value="radio" id="radiogroup7_1" required="required" tabindex="9" title="">                         no</label>                 <div id="functionality">                         <label>                                                     <textarea rows="5"></textarea>                         </label>                     </div>                     <script>                         $("#functionality").hide();                         $("input[name=radiogroup7]").click(function()                             {                                 if ( $("#radiogroup7_1").attr('checked'))                                     $("#functionality").hide();                                 if ( $("#radiogroup7_0").attr('checked'))                                     $("#functionality").show();                         });                                      </script>                     <script>                         $(document).ready(function(){                             $('[data-toggle="popover"]').popover();                            });                     </script>                 </div> 

to fix using jquery 1.12.0:

• use .change() instead of .click() since you're clicking label not input
• use .is(':checked') instead of .attr('checked') since .attr() checks attributes set in dom (in actual html)

imho, should also:

• cache elements used more once $functionality = $("#functionality");
• you should put of code in $(document).ready() function
• use ternary operator simplify if logic

update code below:

---

 $(document).ready(function() {    $('[data-toggle="popover"]').popover();    $functionality = $("#functionality").hide(); // cache , hide in same call    $("input[name=radiogroup7]").change(function() {      $("#radiogroup7_1").is(':checked') ? $functionality.hide(): $functionality.show();    });  }); 

working jsfiddle