Move the Div element up and down when clicked

Question

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately.

<a href="" class="accordion">Click here</a>
 <div class="panel" id="AccordionDiv">
            <div class="store">
                <div class="store-row">

                    <div class="cells store-logo text-center">
                        <img src="@strStaticWebsiteUrl@(objOfferPrice.StoreImage)" alt="" />
                    </div>

                    @if (objOfferPrice.Price < objOfferPrice.UrlPrice)
                    {
                        <div class="cells text-center">
                            <div class="product-price offer-price">Rs. @String.Format(System.Globalization.CultureInfo.InvariantCulture, "{0:0,0}", objOfferPrice.Price)<sup>*</sup></div>
                            <p class="real-price">Price: @objOfferPrice.UrlPrice</p>
                        </div>
                    }
                </div>
           </div>

This code snippet contains HTML followed by the associated script below:

            <script>
                var acc = document.getElementsByClassName("accordion");
                var i;
                for (i = 0; i < acc.length; i++) {
                    acc[i].addEventListener("click", function () {

                        this.classList.toggle("active");
                        var panel = this.nextElementSibling;
                        if (panel.style.display === "block") {
                            panel.style.display = "none";
                        } else {
                            panel.style.display = "block";
                        }
                    });
                        }
            </script>

javascript jquery html css angularjs

Answer 1

Answer №1

Utilize CSS for Animated Effects

CSS animations offer a more visually appealing option compared to Javascript animations. Moreover, CSS animations can be easily halted or reversed midway through.

Javascript Example:

<script>
    var acc = document.getElementsByClassName("accordion");
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("slideActive");
        });
    }
</script>

CSS Styling:

.accordion {
    height: 0px;
    transition: 0.3s;
}
.accordion .slideActive{
    height: 100px;
}

(Feel free to customize the styling as needed)

You can verify if it is active by using:

this.classList.contains('slideActive');

Answer 2

Utilize CSS for Animated Effects

CSS animations offer a more visually appealing option compared to Javascript animations. Moreover, CSS animations can be easily halted or reversed midway through.

Javascript Example:

<script>
    var acc = document.getElementsByClassName("accordion");
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("slideActive");
        });
    }
</script>

CSS Styling:

.accordion {
    height: 0px;
    transition: 0.3s;
}
.accordion .slideActive{
    height: 100px;
}

(Feel free to customize the styling as needed)

You can verify if it is active by using:

this.classList.contains('slideActive');

Answer 3

Answer №2

If you're looking to achieve this effect, jQuery offers a method called slideToggle

To implement it, simply select the next element and use the slideToggle function:
var panel = this.nextElementSibling;
$(panel).slideToggle();

Answer 4

If you're looking to achieve this effect, jQuery offers a method called slideToggle

To implement it, simply select the next element and use the slideToggle function:
var panel = this.nextElementSibling;
$(panel).slideToggle();

Answer 5

Answer №3

Absolutely! In JQuery, we have the ability to incorporate animations such as "slideDown", slideUp, and slideToggle.

$( "#ID1" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // This animation slowly slides down.
  });
});

The same concept can be applied with slideUp as well.

Additionally, "slideToggle" allows for both upward and downward animation effects.

Answer 6

Absolutely! In JQuery, we have the ability to incorporate animations such as "slideDown", slideUp, and slideToggle.

$( "#ID1" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // This animation slowly slides down.
  });
});

The same concept can be applied with slideUp as well.

Additionally, "slideToggle" allows for both upward and downward animation effects.

Move the Div element up and down when clicked

Answer №1

Utilize CSS for Animated Effects

Answer №2

Answer №3

Similar questions

Using React to Retrieve Array Data from an API and Implementing Filtering

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

Having trouble with changing text in a link with an onclick event?

Show various columns in Select2

Encountering issues with multiple arguments in ajax within a C# MVC application - Further details included

Deciphering Django Queryset JSON Data

Declaring a Javascript variable within an if statement does not alter the value of the global variable

Utilizing angularJS to manipulate select options through objects

Problem with IE off-canvas scrolling

Trigger refetchQueries post-execution of a mutation operation

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

Sending a large number of values unrestrictedly via ajax

How can I create multiple divs that look alike?

Tips for creating a flexible popover widget

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Utilizing jQueryUI for rendering tabbed content with JSON data

Show information based on the user's role

What is the best way to contain several elements in a flexbox with a border that doesn't span the entire width of the page?

Executing a curl POST request within an npm script

Keep track of the progress of a PHP function and show it using AJAX