Question

I am hoping this is a simple fix, or maybe my logic is just off. I am creating an accordion menu using jquery. There are radio buttons in the head of the accordion, and inside the body, there are schedules. I want the user to be able to expand and collapse the accordion, and when a schedule is chosen, the selected schedule will be outlined in red with a light grey background. What I have is working, it is just applying the arrow rotation and the toggleClass to every element rather than the single one selected.

What is happening currently is when you click Schedule, all of the arrows are rotating instead of the single one. Also, when a radio button is selected , it is highlighting every div with the “clickedSchedule” class.

I think this has to do with using the (this) in the function…I am just not sure how to write it. Perhaps I have also not executed this in a graceful way, so I am open to all suggestions.

HTML:

    <ul id="menu" class="dropdown">
    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 1</h2></a>

    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 1" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 1" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 1" /><label>Third Choice</label>
    </div>
        <ul>
            <li>

              <div><img src="images/01_fall.gif" width="550" height="334" /></div>
              <div><img src="images/01_sp.gif" width="550" height="334" /></div>

            </li>
        </ul>
    </li>
    </div>

    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 2</h2></a>
    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
    </div>
        <ul>
            <li>            
                <div><img src="images/02_fall.gif" width="550" height="334" /></div>
                <div><img src="images/02_sp.gif" width="550" height="334" /></div>
            </li>
        </ul>
    </li>
    </div>
</ul>

Jquery

<script>
//Expand/Collapses Menu & Rotates arrow
$(document).ready(function() {
    $("#menu:first li > a").click(function() {
        $(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("fast");
        $("#menu:first li > a > div").toggleClass("arrowUp").toggleClass("arrow");
    });
});
</script>
<script>
//highlights chosen Schedule
$(document).ready(function(){

  $("input[name$='first_choice']").click(function(){

  var radio_value = $(this).attr("checked");

  if(radio_value=='checked') {
    $("div.clickedSchedule").css({"border-color" : "red", "border-style" : "solid", "border-width" : "1px", "background-color" : "#f6f6f6"});
    }
  });
});
</script>

CSS:

I have a toggleCLass that switches these classes out.

.arrow {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.arrowUp {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

Maybe I am just forcing these things together and there is a more elegant coding solution. I will leave it up to the gods of stackoverflow:)

UPDATE

I have added a fiddle here

I am running the latest jquery script. If you click first choice in the result, you can see it is selecting every clickedSchedule class instead of just one.

Answer 1

After some simplification and further research, I was able to get it to work.

The Stack article I used can be found here

It was a piece of cake once I learned about the input:not(:checked) option.

Here is the jQuery code:

$(document).ready(function(){
    $(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().parent().parent().removeClass("clickedSchedule");
        $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    });
});
});

html:

<div class="unclickedSchedule">
<li><a class="expanded"><h2>Schedule 2</h2></a>
<div class="scheduleChoice" style="text-align:left;">
  <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
  <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
  <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
</div>
    <ul>
        <li>            
            <div style="width:550px;padding:0 0 0 50px;"><img src="images/animation/02_fall.gif" width="550" height="334" /></div>
            <div style="width:550px; padding:0  0 20px 50px;;"><img src="images/animation/02_sp.gif" width="550" height="334" /></div>
        </li>
    </ul>
</li>
</div>

This does not address the rotating arrows in my original question, but does resolve the highlighted selection when a radio button is clicked.