Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Help me! Please! Multiple .Slidetoggle

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #32620
    Waffle
    Member

    I need help!

    $(document).ready(function(){

    $('.Form').hide();
    $("button.SlideDownBtn").click(function(){

    $(".Form").slideToggle();

    $(document).ready(function(){

    $('.Portfolio').hide();
    $("button.PortfolioBtn").click(function(){

    $(".Portfolio").slideToggle();

    });

    });

    });
    })'

    How do I make this work?
    I have 4 buttons and they have divs below them! I need them to slidetoggle when they are clicked.. but !
    it just messes up and only 1 button slides both of these Divs! its weird

    … See .. $(‘.Portfolio’).hide(); hides the div at the start..
    and then
    $(“button.PortfolioBtn”).click(function(){

    $(“.Portfolio”).slideToggle();

    SHOULD! slide it down, but it just messes up. can someone help me?

    #46831

    Posting the relevant snippet of html code would help, your explanation is a little confusing. Looks like you’re reusing these classes multiple times on the page? The js doesn’t know to differentiate one from another unless you use $(this) or set up a variable list using IDs or something.
    Sounds like an easy fix, I just need more information.
    Also recommend taking some time to do some js or jquery tuts.

    #46801
    Waffle
    Member

    Oh ok thanks. Well Ill show u the html too!




    Portfolio Coming Soon!


    This is Coadin Internets Portfolio area!


    This button makes the div slide down.
    I need to do this multiple times on the same page, Any help?

    #46750
    DogsGhost
    Member

    You have to give each button and div involved a unique class or ID so so the js knows what to toggle. So it would look something like this:

    $(function(){
    //hide everything with class of Portfolio
    $('.Portfolio').hide();
    //toggle specific portfolio when you click a specific button
    $('#button1').click(function(){
    $("#Portfolio1").slideToggle();
    });
    $('#button2').click(function(){
    $("#Portfolio2").slideToggle();
    });
    $('#button3').click(function(){
    $("#Portfolio3").slideToggle();
    });
    });

    You can set up an array (I think that’s what its called) at the start that says like “#button1″:”Portfolio1″,”#button2″:”Portfolio2”,etc. to avoid the repeating code.

    #46717
    Waffle
    Member

    THANK YOU! SO!! MUCH ! :D

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.