Answer to Question #318731 in Web Development for kkkk

Question #318731

JQuery:

Develop a web page that contains 4 buttons and 3 images:

When button 1 is pressed, image 1 will be hidden and when button 1 is pressed again image 1 is will be shown

Button 2 hides image 2

Button 3 hides images 1 and 2

Button 4 hides all images

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>

    <style>
        img {
            max-width: 100px;
            margin-top: 20px;
        }
    </style>

    <button type="button" id="btn_1">Button 1</button>
    <button type="button" id="btn_2">Button 2</button>
    <button type="button" id="btn_3">Button 3</button>
    <button type="button" id="btn_4">Button 4</button>

    <br>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYXS8yaM-CHicTeINC3JsZYg8qgvxMYEvjqA&usqp=CAU" alt="" id="img_1"> <br>
    <img src="https://clipart-best.com/img/number-2/number-2-clip-art-20.png" alt="" id="img_2"> <br>
    <img src="https://pngimg.com/uploads/number3/number3_PNG14979.png" alt="" id="img_3"> <br>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/NYCS-bull-trans-4.svg/240px-NYCS-bull-trans-4.svg.png" alt="" id="img_4">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $('#btn_1').on('click', () => $('#img_1').toggle());
        $('#btn_2').on('click', () => $('#img_2').toggle());
        $('#btn_3').on('click', () => $('#img_1, #img_2').toggle());
        $('#btn_4').on('click', () => $('img').toggle());
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #318731 in Web Development for kkkk

Comments

Leave a comment

Related Questions