Question

I am creating a small website that allows a user to browse some of Shakespeare plays. I have it working that when a user clicks on a play, the name of the play is displayed in a header and the script of the play is displayed within a separate div.

This is working fine but I am now trying to organise the various plays into a drop down menu. I have split the plays into two categories (comedies and histories) and have grouped the plays accordingly.

The problem I now have is that once I click on a play via the drop down menu, the entire list of plays within that catergory (i.e. comedies) is displayed in the header instead of only the play I have selected. The play I selected however is still correctly shown in the div that displays the play (the ‘mainOutput’ div).

So basically what i need to know is how to I can set up that drop down menu so that only the title of the play I select shows in the header. Hopefully I have explained this correctly and any help would be appreciated! here is my code…

The jquery that initiates the play to be shown:

  $(document).ready(function(){   /* The code here can be modified to allow for any means of obtaining playName */
    $('li').click(function(event) {
  var playName = $(this).attr("id");
      $("header>span").text($(this).text());
      loadPlay(playName);
    });         

The drop down menu:

<div style="margin-left:50px;">
    <ul id="menu">
        <li><a href="#">Comedies</a>
            <ul id="help">
                <li>
                    <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                    <li id="all_well.xml" class="comedy">All's Well That Ends Well</li>
                    <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                </li>
                </ br>
                <li id="as_you.xml" class="comedy">As You Like It</li> </ br>
                <li id="com_err.xml" class="comedy">The Comedy of Errors</li> </ br>
              <li id="cymbelin.xml" class="comedy">Cymbeline</li> </ br>
              <li id="lll.xml" class="comedy">Love's Labours Lost</li> 
              <li id="m_for_m.xml" class="comedy">Measure for Measure</li> 
                          <li class="last">
                </li>
            </ul>
        </li>
        <li><a href="#">Histories</a>
            <ul id="help">
                <li>
                    <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                     <li id="hen_iv_1.xml" class="history">Henry IV, Part I</li>                                                                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                </li>
          <li id="hen_iv_2.xml" class="history">Henry IV, Part II</li> 
          <li id="hen_v.xml" class="history">Henry V</li> 
          <li id="hen_vi_1.xml" class="history">Henry VI, Part I</li> 
          <li id="rich_iii.xml" class="history">Richard III</li>
                <li class="last">
                </li>
            </ul>
        </li>
        </div>

Where the play data is displayed:

<header><span>Shakespeare's Plays<span></span></span></header>

Answer 1

This happens because you bind click event to all li items, including your dropdown list headings. You can change the selector to make it workable.

$(document).ready(function() {
    $('#menu ul li').click(function(event) {
        var playName = $(this).attr("id");
        $("header > span").text($(this).text());
        loadPlay(playName);
    });
});

Of course, there are many other problems in your code.

1. You should improve IDs of the elements (e.g. you have several elements with ID help, should be only one).
2. List element ul should contain as first childs li elements only (you also have br elements, not correct).
3. Pay attention, you have two span elements in header. Consider using only one if you wish to fill it with text (see JavaScript).