Okay, so a couple core things. You#Naming
You should start learningnaming your classes something a little more readable than div1 as all that tells me that it'sit's a div and programmers frequently use div.classname in CSS in order to form a more concise selectorbut nothing regarding functionality. Like, instead of div2div1 I'd use something like primary-content as my class name.
#Document.ready
$(document).ready(function(){
//button 1
$("#button1").click(function(){
$("#text1").toggle();
});
//button 2
$("#button2").click(function(){
$("#text2").fadeToggle();
});
//button 3
$("#button3").click(function(){
//Had to break this line into 2 so I could post this, wouldn't let me indent/space right
$("#text3")
.fadeIn()
.slideUp(500)
.slideDown(500)
.slideUp(500)
.slideDown(500)
.fadeOut();
});
});
Next, your#Indentation and trailing } and });
Your indentation seems to be a little off. This is a common thing that happens. Because of that it It is easy to fix (unless there is more than just indentation problems). I frequently Google <language name> beautifier>beautifier. What a beautifier does is formatindent your code with inhuman precision. Try a CSS beautifier. I say this because beautifying/indenting correctly can make debugging easier. I found a couple of extra tidbits that should not be there trailing }.
#CSS Selectors
It is also considered good practice to make your CSS selectors as precise as possible (without impeding your program), like instead of .primary-content, you could use div.container > div.primary-content. Where the container contains primary content. Having
Having imprecise CSS selectors can backfire. For instance, when you go to use h1 somewhere else and the page and it ends up being blue because you set h1{color:blue}. Of course, you can override that styling, but you may get a little sick of doing that after you have to manually set your tenthx-th h1's color back to default.
I'd personally try to steer away from manually setting width and height in the case of a button as your button will display wrong if you ever need to go back and modify the text. So, I'd instead use padding for what you're doing.
#coll_button {
border-radius: 6px;
padding:10px 40px 10px 40px;
margin-top: 30px;
margin-left: 20px;
}
When I am chaining jQuery functions, I commonly use another indent for each function call. I find it to be more readable.
$("#button3").click(function(){
$("#text3")
.fadeIn()
.slideUp(500)
.slideDown(500)
.slideUp(500)
.slideDown(500)
.fadeOut();
});
#text1, #text2, #text3 {
padding: 10px 0 0 10px;
display: none;
}
#Button formatting
I'd personally try to steer away from manually setting width and height in the case of a button because if you were to change the text at all in the future, it will not display as intended. There are cases where it's okay to set button size to the pixel but that is on a case-by-case basis. So, I'd instead use padding for what you're doing.
#coll_button {
border-radius: 6px;
padding:10px 40px 10px 40px;
margin-top: 30px;
margin-left: 20px;
}
#jQuery indentation
When I am chaining jQuery functions, I commonly use another indent for each function call. I find it to be more readable.
$("#button3").click(function(){
$("#text3")
.fadeIn()
.slideUp(500)
.slideDown(500)
.slideUp(500)
.slideDown(500)
.fadeOut();
});