Please help in the todo sections thank you <script> $(document).ready(function()
ID: 645446 • Letter: P
Question
Please help in the todo sections thank you
<script>
$(document).ready(function() {
$("#button1").click(function() {
//TODO: toggle the contents of the element with id='id1'
// This means 1) use jQuery selection to get the named element
// 2) call the toggle() function on the selection.
});
$("#button2").click(function() {
//TODO: toggle the contents of all h1 elements
// This means 1) use jQuery selection to get the h1 element
// 2) call the toggle() function on the selection.
});
$("#button3").click(function() {
//TODO: toggle the contents of elements with style 'image'
// This means 1) use jQuery selection to get the element(s) with that style
// 2) call the toggle() function on the selection.
});
$("#button4").click(function() {
//TODO: toggle the contents of elements the div element w/ styles 'image' and 'red'
// This means 1) use jQuery selection to get the element(s) with those styles
// 2) call the toggle() function on the selection.
});
//TODO: Look up jQuery documentation on toggle and experiment with its parameters
// also try using variants of toggle() which are fadeToggle(), slideToggle() and toggleClass().
// Turn in a final version that implements the desired selectors for each of
// the buttons and demonstrates some interesting toggling behavior.
});
</script>
</head>
<body>
<button id="button1">Toggle id selector</button>
<button id="button2">Toggle 'h1' selector</button>
<button id="button3">Toggle style 'image' selector</button>
<button id="button4">Toggle style 'image' and 'red' selector</button>
<header id="id1">Text inside named 'header'</header>
<h1>Text inside first 'h1' tag</h1>
<h1>Text inside second 'h1' tag</h1>
<div class="image"><img src="images/plus.png" />
<ul>
<li>bullet1</li>
<li>bullet2</li>
</ul>
</div>
<div class="image red"><img src="images/plus.png" />
<ul>
<li>bullet3</li>
<li>bullet4</li>
</ul>
</div>
</body>
</html>
Explanation / Answer
<script>
$(document).ready(function() {
$("#button1").click(function() {
//TODO: toggle the contents of the element with id='id1'
// This means 1) use jQuery selection to get the named element
// 2) call the toggle() function on the selection.
$("#id1").toggle();
});
$("#button2").click(function() {
//TODO: toggle the contents of all h1 elements
// This means 1) use jQuery selection to get the h1 element
// 2) call the toggle() function on the selection.
$("h1").toggle();
});
$("#button3").click(function() {
//TODO: toggle the contents of elements with style 'image'
// This means 1) use jQuery selection to get the element(s) with that style
// 2) call the toggle() function on the selection.
$(".image").toggle();
});
$("#button4").click(function() {
//TODO: toggle the contents of elements the div element w/ styles 'image' and 'red'
// This means 1) use jQuery selection to get the element(s) with those styles
// 2) call the toggle() function on the selection.
$(".image red").toggle();
});
//TODO: Look up jQuery documentation on toggle and experiment with its parameters
// also try using variants of toggle() which are fadeToggle(), slideToggle() and toggleClass().
// Turn in a final version that implements the desired selectors for each of
// the buttons and demonstrates some interesting toggling behavior.
});
</script>
</head>
<body>
<button id="button1">Toggle id selector</button>
<button id="button2">Toggle 'h1' selector</button>
<button id="button3">Toggle style 'image' selector</button>
<button id="button4">Toggle style 'image' and 'red' selector</button>
<header id="id1">Text inside named 'header'</header>
<h1>Text inside first 'h1' tag</h1>
<h1>Text inside second 'h1' tag</h1>
<div class="image"><img src="images/plus.png" />
<ul>
<li>bullet1</li>
<li>bullet2</li>
</ul>
</div>
<div class="image red"><img src="images/plus.png" />
<ul>
<li>bullet3</li>
<li>bullet4</li>
</ul>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.