New to jQuery Basic Question

New to jQuery Basic Question

Hi

I have a very basic set up which is working, I've just cobbled the code together from some other examples. Could anyone show me the proper way to do this?

I just get the feeling that my code is too simplistic and too long.

Any tips much appreciated.

Thanks

Ricky55

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
      $(function() {
        
         $("#classic").click(function() {
     
        $("#classicDiv").slideDown("normal");
        $("#superiorDiv").slideUp("normal");
        $("#latexDiv").slideUp("normal");
        });
        
         $("#superior").click(function() {
     
      $("#classicDiv").slideUp("normal");
        $("#superiorDiv").slideDown("normal");
        $("#latexDiv").slideUp("normal");
        });
        
        $("#latex").click(function() {
     
      $("#classicDiv").slideUp("normal");
        $("#superiorDiv").slideUp("normal");
        $("#latexDiv").slideDown("normal");
        });

         
      });
    </script>

    <style type="text/css">
    div#classicDiv {
    width: 200px;
    height: 200px;
    }

    div#superiorDiv {
    width: 200px;
    height: 400px;
    display: none;
    }


    div#latexDiv {
    width: 200px;
    height: 200px;
    display: none;
    }

    div#sample {
    width: 650px;
    height: 350px;
    background: red;
    }

    </style>


    <body>



    <form>

    <label for="apples">Select Classic</label>
    <input id="classic" name="comfortOpt" type="radio" value="classic" checked />

    <label for="oranges">Select Superior</label>
    <input id="superior" name="comfortOpt" type="radio" value="superior" />

    <label for="oranges">Select Latex</label>
    <input id="latex" name="comfortOpt" type="radio" value="latex" />



    <div id="classicDiv">
    <p>Classic Text.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>

    <div id="superiorDiv">
    <p>Superior text</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>

    <div id="latexDiv">
    <p>Latex Text</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>

    <div id="sample"></div>
    </form>





    </body>
    </html>