CODEWITHSUNDEEP
jquery
Nyra
Nyra

Reputation: 897

What is wrong with my jQuery syntax?

From what I've read this should be the proper syntax for this jQuery - I am trying to attach a click event to each radio button to change the state of the visibility of the <div>s 

  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js">
      $(document).ready(function () {
          $('#blue').click(function () {
              $('#two').hide();
              $('#one').show();
          });
          $('#orange').click(function () {
              $('#two').show();
              $('#one').hide();
          });
          $('#both').click(function () {
              $('.hide').show();
          });
          $('#none').click(function () {
              $('.hide').hide();
          });
      });
  </script>
  <style type="text/css"> 
      .hide{display:none;}
      ul li{list-style:none;}
  </style>

  </asp:Content>
  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

          <div id="one" style="width:50px; height:50px; float:left; background:blue;" class="hide"></div>
          <div id="two" style="width:50px; height:50px; float:left; background:orange;" class="hide"></div>
          <hr style="clear:both;" />
          <ul>
              <li><input id="blue" type="radio" name="options" />Blue Div</li>
              <li><input id="orange" type="radio" name="options" />Orange Div</li>
              <li><input id="both" type="radio" name="options" />Both Divs</li>
              <li><input id="none" type="radio" name="options" />No Divs</li>
          </ul>

  </asp:Content>

Upvotes: -1

Views: 46

Answers (2)

Musa
Musa

Reputation: 97672

Content inside a script tag with a src attribute is ignored, you have to have a separate tag for the library and for your code.

  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $('#blue').click(function () {
              $('#two').hide();
              $('#one').show();
          });
          $('#orange').click(function () {
              $('#two').show();
              $('#one').hide();
          });
          $('#both').click(function () {
              $('.hide').show();
          });
          $('#none').click(function () {
              $('.hide').hide();
          });
      });
  </script>

Upvotes: 1

asimshahiddIT
asimshahiddIT

Reputation: 330

Its working fine...........   
check the demo link.

http://jsfiddle.net/asimshahiddIT/w73eqr60/

Upvotes: 0

Related Questions