SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Marbach
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery toggle with load()

    Hi everybody,

    I'd like to create a list in which the content divs can be opened and closed with the responding jquery function.

    Could anyone give me a hint how I can load the content into the divs dynamically with jquery load function when I open it up with toggle ?

    Thank you very much.

    Regards
    Ralf

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rabele View Post
    Could anyone give me a hint how I can load the content into the divs dynamically with jquery load function when I open it up with toggle ?
    Sure thing, by using [url="http://api.jquery.com/load/"}.load()[/url]
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Marbach
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Sure thing, by using [url="http://api.jquery.com/load/"}.load()[/url]
    Thanks for your reply. And how can I combine load with toggle ? Do I have to use load as callback of toggle ?

    Looking forward for any further hints :-)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rabele View Post
    Thanks for your reply. And how can I combine load with toggle ? Do I have to use load as callback of toggle ?
    That would be a good idea. Even if the load request takes longer than it does for the toggle to occur, it could work better to wait until after the toggle has finished occurring,
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    970
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is how I would approach it
    HTML
    Code:
    <a href="the_url_here" class="toggle_load" />Link Text</a>
    <div class="load_target"></div>
    JS
    Code:
    $('.toggle_load').click(function(event) {
         var url = $(this).attr('href');
         var target = $(this).next('.load_target');
         target.load(url, function() {
              target.slideDown('fast');
         });     
         event.preventDefault();
    });
    I know this doesn't toggle, but then you just add an if statement testing for the div's current condition.

    p.s: it's late, code is untested, but I'm trying to help.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...


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
  •