Forums

Waffle

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?

whiteInkDesign

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.

Waffle

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

<button class="PortfolioBtn"></button>
           
           <div class="Portfolio">
           <h1>Portfolio Coming Soon!</h1>
           <p>This is Coadin Internets Portfolio area!</p>
           </div>

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

DogsGhost

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.

Waffle

THANK YOU! SO!! MUCH ! :D

treehouse : what would you like to learn today?

Forums

Help me! Please! Multiple .Slidetoggle