SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast cliffgs's Avatar
    Join Date
    Aug 2003
    Location
    West Coast, New Zealand
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone show me how toggle might work with this

    Hi all

    I am just learning jQuery and am having heaps of fun.

    Anyway, I have this website which contains two images, one of which is hidden. Each image has an a link referencing the other picture. I have got it working (and I show the relevant parts below), but I am really sure that a toggle function would surely work, but I don't know how to do it.

    I would appreciate any help.

    Here is the HTML code:
    Code:
    <div id="pics">
    <div id="left"><img src="/images/f50.gif" style="height:150px" />
        <br><span class="smallLink">SAMAP F50</span><img style="padding-top:4px;" src="/images/diamond_brown.gif"><a class="smallLink" href="f100" >SAMAP F100</a>
    </div>
    <div id="right"><img src="/images/f100.gif" style="height:150px" />
        <br><a class="smallLink" href="f50">SAMAP F50</a><img style="padding-top:4px;" src="/images/diamond_brown.gif"><span class="smallLink">SAMAP F100</span>
    </div>
    </div>
    Here is the css:
    Code:
               #pics,#left,#right{
                    text-align:center;
                    padding-left:3px;
                    width: 160px;
                    height:150px;
                }
                #pics{
                    float: right;
                }
                #left,#right{
                    right: 15px;
                    top: 5px;
                }
                #right{
                    display: none;
                }
    and here is my jQuery:
    Code:
                    $("div#left a").click(function(e) {
                        e.preventDefault();
                        $("div #left").hide();
                        $("div #right").show();
                    });
                   $("div#right a").click(function(e) {
                        e.preventDefault();
                        $("div #right").hide();
                        $("div #left").show();
                    });
    There is a document ready function wrapping this, but there is also another jquery function going on, so I haven't shown it.

    Any help would be tremendous. As I said, it is working like that, but surely a toggle function would be more efficient.

    Thanks in advance

  2. #2
    SitePoint Zealot 2ndmouse's Avatar
    Join Date
    Jan 2007
    Location
    West London
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI cliff

    I'm not sure about jquery, but you could try javascript's onclick="toggle_visibility('pics');

  3. #3
    SitePoint Enthusiast cliffgs's Avatar
    Join Date
    Aug 2003
    Location
    West Coast, New Zealand
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 2ndmouse View Post
    HI cliff

    I'm not sure about jquery, but you could try javascript's onclick="toggle_visibility('pics');
    Thanks 2ndmouse. I really want to do this with jQuery (then I don't have to worry too much about browser problems). But your answer has given me enough of a hint to have another look at how jQuery toggle works and reference the pics div.


Bookmarks

Posting Permissions

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