simple jquery help!

Discussion in 'Web Design and Development' started by Me1000, Sep 29, 2007.

  1. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #1
    Is anyone familiar with jQuery?

    I have a div called testidrop,
    Code:
    <div class="testidrop" id="testidrop">...</div>
    normally is is hidden, but when I click on a link (testialink)
    it should drop down,

    Code:
    <a href="#" id="testialink" class="testialink">Testimonials</a>
    So I thought it was all working great, until I discovered than whenever you click ANYWHERE on the page it drops down!
    :confused:

    Here is the code in the head tag

    Code:
    	<script>
    //show testimonials
    $(document.getElementById('testialink')).click(function(){$(document.getElementById('testidrop')).slideToggle("slow")});
    
    $(document.getElementById('close')).click(function(){$(document.getElementById('testidrop')).slideup("slow")});
    </script>
    (BTW the reason for the close one, us because there is a link within the testidrop div that will close it)


    any idea why this happens? or what I can do to fix it?


    Big Thanks,
     
  2. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #2
    Not tested it, but try this;
    Code:
    <script>
    $(document).ready(function(){
    $(document.getElementById('testialink')).click(function(){
    	$(document.getElementById('testidrop')).slideToggle('slow');
    });
    $(document.getElementById('close')).click(function(){
    	$(document.getElementById('testidrop')).slideup('slow');
    });
    }
    </script>
     
  3. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #3
    Why are you calling getElementById? jQuery will do all that for you!

    $('#elementId').click( ... )
     
  4. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #4
    Converting your first example:

    $('#testialink').click(function(){$('#testidrop').slideToggle('slow');});
     
  5. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #5
    $('#close').click(function(){$('#testidrop').slideUp('slow')});
     
  6. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #6
    I tried to do the #=id thing, but it never worked,

    this is what I finally got to work

    Code:
    $(document).ready(setTestimonials);
    
    function setTestimonials() {
    
    	$('#testialink').click( function(){ $('#testidrop').slideToggle('slow') } );
    	$('#close').click( function(){ $('#testidrop').slideUp('slow') } );
    
    }
     
  7. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #7
    Try adding "name" alongside the "id" and changing the jQuery as suggested. ;)
     

Share This Page