Activate jQuery when a click event occurs to modify the CSS of a specific

Question

Activate jQuery when a click event occurs to modify the CSS of a specific

I've managed to create 2 buttons labeled SHOW & HIDE, along with a DIV containing some content. My goal is for the first button to expand the width of the content DIV upon clicking, hiding itself in the process and revealing the second button simultaneously.

Conversely, when the second button is clicked, the content DIV should collapse its width, hiding the second button and bringing back the first button. However, I'm encountering an issue with this functionality. Can someone help me out?

$(document).ready(function(){
    $("#seeall2").hide();

    $("#seeall").bind("click",
    function(){
        $("#speakers").animate({width: 880}, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click",
    function(){
        $("#speakers").animate({width: 410}, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
});

This is my HTML :

<div id="speakers">

          <a href="" id="seeall">EXPAND</a>
          <a href="" id="seeall2">COLLAPSE</a>


            <div id="pics-wrap">
 content...
            </div>
</div>

PLEASE SEE THIS http://jsfiddle.net/ajinkyax/mSjbV/ ITS WORKING NOW. SOLUTION : I removed extra space from SCRIPT tag

jquery css jquery-animate

Answer 1

Answer №1

This code has been tested and is working properly:

$(document).ready(function () {

    $("#seeall2").hide();

    $("#seeall").bind("click", function () {
        $("#speakers").animate({
            width: 880
        }, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click", function () {
        $("#speakers").animate({
            width: 410
        }, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
});

Link to the working demo on jsfiddle

Answer 2

This code has been tested and is working properly:

$(document).ready(function () {

    $("#seeall2").hide();

    $("#seeall").bind("click", function () {
        $("#speakers").animate({
            width: 880
        }, 1500);
        $("#seeall").hide(500);
        $("#seeall2").show(500);
    });

    $("#seeall2").bind("click", function () {
        $("#speakers").animate({
            width: 410
        }, 1500);
        $("#seeall").show(500);
        $("#seeall2").hide(500);
    });
});

Link to the working demo on jsfiddle

Answer 3

Answer №2

Experience a fully functional webpage....

<html>
<head>
    <title>Homepage</title>
</head>
<body>

<button id="showContent" value="Display" type="button">
    Display</button>
<button id="hideContent" value="Hide" type="button">
    Hide</button>
<div id="contentSection" style="display: none">
    [Your Content]
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function (e) {
        $("#hideContent").hide();
        $("#showContent").bind("click",
                function (e) {
                    $("#contentSection").show().animate({ width: 880 }, 1500);
                    $("#showContent").hide(500);
                    $("#hideContent").show(500);
                });
        $("#hideContent").bind("click",
                function (e) {
                    $("#contentSection").hide().animate({ width: 410 }, 1500);
                    $("#showContent").show(500);
                    $("#hideContent").hide(500);
                });
    });

</script>

</body>
</html>

Enjoy this interactive page!!!

Answer 4

Experience a fully functional webpage....

<html>
<head>
    <title>Homepage</title>
</head>
<body>

<button id="showContent" value="Display" type="button">
    Display</button>
<button id="hideContent" value="Hide" type="button">
    Hide</button>
<div id="contentSection" style="display: none">
    [Your Content]
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function (e) {
        $("#hideContent").hide();
        $("#showContent").bind("click",
                function (e) {
                    $("#contentSection").show().animate({ width: 880 }, 1500);
                    $("#showContent").hide(500);
                    $("#hideContent").show(500);
                });
        $("#hideContent").bind("click",
                function (e) {
                    $("#contentSection").hide().animate({ width: 410 }, 1500);
                    $("#showContent").show(500);
                    $("#hideContent").hide(500);
                });
    });

</script>

</body>
</html>

Enjoy this interactive page!!!

Answer 5

Answer №3

There seems to be an issue with your current setup.

The problem lies in using two anchor tags simultaneously.

Clicking on one anchor tag triggers events for both.

 $("#seeall").bind("click", and   $("#seeal2").bind("click",

To resolve this, consider using two buttons instead of anchors.

<input type="button" id="seeall" value="EXPAND" />
<input type="button" id="seeall2" value="COLLAPSE" />

Answer 6

There seems to be an issue with your current setup.

The problem lies in using two anchor tags simultaneously.

Clicking on one anchor tag triggers events for both.

 $("#seeall").bind("click", and   $("#seeal2").bind("click",

To resolve this, consider using two buttons instead of anchors.

<input type="button" id="seeall" value="EXPAND" />
<input type="button" id="seeall2" value="COLLAPSE" />

Answer 7

Answer №4

simply attempt to include

  e.preventDefault();

within both the click event

View Example Here : http://jsfiddle.net/mSjbV/2/

Answer 8

simply attempt to include

  e.preventDefault();

within both the click event

View Example Here : http://jsfiddle.net/mSjbV/2/

Activate jQuery when a click event occurs to modify the CSS of a specific

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Steps to add a background image without a border:

Numerous submissions in various forms

What is the most effective way to send a list of objects to a Controller

Load a .obj model into a variable using three.js

Menu navigation with animated transitions - Not achieving the desired result

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

HTML border width is set to 100%, but there seems to be an issue with the responsive menu border and icon display

Struggling with incorporating a lightbox within an accordion feature in an .html file

Issues with implementing @font-face on a singular font

How can we stop the anchor jump caused by a third-party script?

Is it possible to implement Ionic components on a website without using the Ionic framework?

Customize the Underline Color in MaterialUI Select Component

Utilize flexbox for text wrapping while preserving the proportionate column width for varying text lengths

Preventing Click Events from Firing During Drag in JavaScript

What is the reason behind certain vanilla JavaScript libraries necessitating NPM?

What is the best way to achieve this particular look using CSS3?

Removing information from a datatable using an AJAX request

What is the best way to prevent 2 divs from overlapping on a webpage?

What could be causing the issue with image handling in ASP.NET deployed on a local IIS server?

Unable to use jQuery to send a basic ajax request in order to retrieve a json file