I'm struggling to get this code right. Could it be a syntax issue? jQuery is confusing me, as the alert works but not the functions. Is there something specific I need to do in order to make them work properly? How can I ensure that everything runs smoothly?
$(document).ready(function() {
$('#button1').click(function() {
('p').addClass('.red');
});
$('#button2').click(function() {
$('img').slideToggle;
});
$()
});body * {
outline: 1px dotted palevioletred;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 1024px;
min-height: 700px;
}
.row {
border-bottom: 3px solid black;
}
.click {
display: inline-block;
width: 200px;
text-align: center;
vertical-align: center;
margin-bottom: 30px;
}
.content {
display: inline-block;
text-align: center;
width: auto;
margin: 25px;
}
button {
height: 35px;
width: 75px;
text-align: center;
}
.red {
background-color: red;
}
.blue {
color: blue;
}<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<div class="container">
<div class="top_row">
<div class="top_left click">
<button id="button1">Add Class</button>
</div>
<div class="top_right content">
<h1>Add Class</h1>
<p class="blue">Click the button to add class 'red' to this paragraph.</p>
</div>
</div>
<div class="middle_row">
<div class="middle_left click">
<button id="button2">Sidetoggle</button>
</div>
<div class="middle_right content">
<h1>SideToggle</h1>
<p>Click the button to slidetoggle a hidden image.</p>
<img src="bayBridge.jpg">
</div>
</div>
<div class="bottom_row">
<div class="bottom_left click">
<button id="button3">Append</button>
</div>
<div class="bottom_right content">
<h1>Append</h1>
<p>Click the button to append a new paragraph.</p>
</div>
</div>
</div>