www.webdeveloper.com
Results 1 to 5 of 5

Thread: Hiding Divs using Jquery

  1. #1
    Join Date
    Apr 2012
    Posts
    4

    Hiding Divs using Jquery

    Hi I am an absolute beginner and have tagged together the following code to show/hide multiple divs.

    No surprise - it doesn't work! I have no understanding of what I am doing so any help would be appreciated!

    CODE BELOW

    <!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">
    <head>
    <title>
    Toggle Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    .button
    {
    cursorointer;
    }​
    -->
    </style>
    </head>
    <body>
    <div class="buttons">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
    </div>
    <div id="div1">1</div>
    <div id="div2" style="display:none;">2</div>
    <div id="div3" style="display:none;">3</div>
    <div id="div4" style="display:none;">4</div>
    <script type="text/javascript">
    $('#showdiv1').click(function(){
    $('div[id^=div]').hide();
    $('#div1').show();
    });
    $('#showdiv2').click(function(){
    $('div[id^=div]').hide();
    $('#div2').show();
    });

    $('#showdiv3').click(function(){
    $('div[id^=div]').hide();
    $('#div3').show();
    });

    $('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();
    });​</script>
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    it works for me
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Apr 2012
    Posts
    4
    Hi Padonak

    You are right this works in every browser except Safari!

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    For me, it works with Mozilla Firefox and Safari for windows, after deleting a strange character before the script closing tag...

  5. #5
    Join Date
    Apr 2012
    Posts
    4
    The strange character does not show on the Mac and is why there are threads from Mac users with the same problem. Delete the character and it works!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles