Selecting a control using the CSS class

This recipe will demonstrate how to access ASP.NET controls, such as Image, Panel, and BulletedList based on the CSSClass assigned to them. The constructs used in this example are as follows:

Getting ready

Let's access the ASP.NET controls using CssClass:

1. To demonstrate the CSS selector in jQuery, we will build a simple application that displays a List of Questions. The answers can be seen by clicking on the respective plus + icon next to the question:
   

   The page also has a checkbox on top. By clicking on this checkbox, all the answers will be displayed, as shown in the following screenshot:

   
2. By clicking on the minus - icon, the corresponding answer can be collapsed.
3. To get started, create an ASP.NET Web Application project using the Empty template, and name the project Recipe2 (or any other suitable name).
4. Add a Web Form to the project and name it Default.aspx.
5. Create a Scripts folder and add jQuery files (debug and release versions of a library) to it.
6. Include the jQuery library in the form using either the <script> block or the ScriptManager control, as described in Chapter 1, Getting Started with jQuery in ASP.NET.
7. Create an images folder in the project and include images for the plus and minus icons.
8. Now, drag and drop ASP.NET controls by navigating to the Toolbox | Standard controls to create the required form, as shown in the preceding screenshot.
9. The HTML markup for the form is as follows:

   <asp:CheckBox ID="chkShowAll" runat="server" Text="Show all answers" />
   <br /><br />
   <asp:ImageButton ID="imgExpand1" runat="server" CssClass="image" ImageUrl="~/images/plus.png"/>
   <asp:Literal ID="litQuestion1" runat="server">What is SDLC?</asp:Literal>
   <asp:Panel ID="pnlAnswer1" CssClass="answer" runat="server">
     The systems development life cycle …</asp:Panel>
   <br />
   <asp:ImageButton ID="imgExpand2" runat="server" CssClass="image" ImageUrl="~/images/plus.png"/>
   <asp:Literal ID="litQuestion2" runat="server">List at least 3 models of software development.</asp:Literal>
   <asp:BulletedList ID="bltAnswer2" CssClass="answer" runat="server">
     <asp:ListItem>Waterfall model</asp:ListItem>
     <asp:ListItem>Spiral model</asp:ListItem>
     <asp:ListItem>Rapid Application Development (RAD) model</asp:ListItem>
   </asp:BulletedList>
   <br />
   <asp:ImageButton ID="imgExpand3" runat="server" CssClass="image" ImageUrl="~/images/plus.png"/>
   <asp:Literal ID="litQuestion3" runat="server">List the essential steps in software development.</asp:Literal>
   <asp:BulletedList ID="bltAnswer3" CssClass="answer" runat="server">
     <asp:ListItem>Requirements Gathering</asp:ListItem>
     <asp:ListItem>Design</asp:ListItem>
     <asp:ListItem>Implementation</asp:ListItem>
     <asp:ListItem>Evaluation</asp:ListItem>
   </asp:BulletedList>

10. Add the following CSS styles to the page:

    .answer {
      color: blue;
    }
    .image {
      height: 12 px;
      width: 12 px;
      margin - right: 5 px;
    }

How to do it…

Create a <script> block after the reference to the jQuery library has been added, and add the following code:

<script type="text/javascript">
$(document).ready(function() {
  $(".answer").hide();
  $("#<%=chkShowAll.ClientID%>").click(function() {
    if ($("#<%=chkShowAll.ClientID%>").is(":checked")) {
      $(".answer").show();
      $(".image").attr("src", "images/minus.png");
    } else {
      $(".answer").hide();
      $(".image").attr("src", "images/plus.png");
    }
  });
  $(".image").click(function(evt) {
    $(this).next(".answer").toggle();
    var src = ($(this).attr("src") === "images/plus.png") ? "images/minus.png" : "images/plus.png";
    $(this).("src", src);
    evt.preventDefault();
  });
});
</script>

How it works…

Using the CssClass to select ASP.NET controls can be done in the following steps:

1. On running the application by pressing F5, all page elements with the answer CssClass are hidden by executing the following statement:

   $(".answer").hide();

   Note

   Note: Because of this, once the page loads, only questions are visible.

2. When you click on the checkbox on the top of the page, its click event is triggered. An event handler is tied to the click event as follows:

   $("#<%=chkShowAll.ClientID%>").click(function () {…});

3. In the preceding click event handler, firstly, the status of the checkbox is determined using the checked filter. If the checkbox is checked, then the answers are shown and the plus icons are changed to minus icons:

   if ($("#<%=chkShowAll.ClientID%>").is(":checked")) {
     $(".answer").show();
     $(".image").attr("src", "images/minus.png");
   }

   If the checkbox is unchecked, the answers are hidden and the minus icons are updated to plus icons:

   else {
     $(".answer").hide();
     $(".image").attr("src", "images/plus.png");
   }

   Thus, using the CSS selector on the answer and the image elements, the required contents can be shown or hidden.

4. In addition to this, the user can click on the plus and minus icons to expand or collapse the answers, respectively. Hence, a click event is tied to the image elements using the CSS selector for the images, as follows:

   $(".image").click(function (evt) {…});

   In the preceding event handler, the answer element following the image is toggled to show or hide, as follows:

   $(this).next(".answer").toggle(); 

   Lastly, the image is also toggled—that is, plus to minus or minus to plus, using the .attr() method:

   var src = ($(this).attr("src") === "images/plus.png") ? "images/minus.png" : "images/plus.png";
   $(this).attr("src", src);

   Lastly, to prevent the image click event from submitting the form, evt.preventDefault() is executed.

See also

• The Selecting an element by its position in the DOM recipe