Trying to hide/show divs on radio button clicks

Question 1

so if you have something like this in your header

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

the you can use this anywhere after this:

 $(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});
    });

also i would recommend you to use console.log instead of alert, this way your script does not stop each time to alert something.

so the final should look something like this::::

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Panini">Panini</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Sandwich">Sandwich</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Baguette">Baguette</label>

<div id="div_bread_options" class="collapse span3"> <!--2.2-->
            <h4>Which bread would you like?</h4>
            <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">White</label>
            <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">Brown</label>
            <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">Granary</label>
            <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label>
        </div> <!--2.2-->

        <div id="div_butter_options" class="collapse span3"> <!--2.3-->
            <h4>Would you like butter?</h4>
            <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes">Yes</label>
            <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No">No</label>
            <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label>
        </div> <!--2.3-->
</div>

<script type="text/javascript">
 $(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});
    });


</script>

</body>
</html>

Question 2

Common issue actually - Your script is run before the browser has loaded the whole document; essentially the body doesn't exist yet.

Simplest solution is to contain any code that modifies the document inside of a 'document ready' function. JQuery makes this simple.

$(function() {
  // document manipulation code here
});

Note that if your script happens to be below the < body > tag, then I may have jumped the gun, and there could be another issue in your code.

Question 3

Use latest jQuery library from google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$("input[name='input_sandwich_choice']").on("click",function() {
        var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
        alert(checkedValue);
        if(checkedValue=="Panini") {
            $("#div_bread_options").collapse('hide');
            $("#div_butter_options").collapse('show');
        }

        else if(checkedValue=="Sandwich") {
            $("#div_bread_options").collapse('show');
            $("#div_butter_options").collapse('hide');
        }

        else if(checkedValue=="Baguette") {
            $("#div_bread_options").collapse('show');
            $("#div_butter_options").collapse('hide');
        }

        else {
            alert("Oops.");
        }
  });
});
</script>