Multiple onClick Animation Targets from single button


Topic: Multiple onClick Animation Targets from single button

edavey pro premium priority asked 11 months ago

I have multiple divs, each with a different animation type, delay etc.

I would like them all to load with the click of a single button.

I am able to get the button to start the animation of a single div by using data-mdb-animation-target="#..."

However I would like this button to start the animation of multiple divs

what is the syntax for having multiple data-mdb-animation-targets???

animation-target="#divid1 #divid2 #divid3"???

see below html

<!-- Submit button -->
<div class="container-fluid d-flex justify-content-center p-5">
    <button data-mdb-ripple-init type="submit" class="btn btn-primary" id="load-report-button" data-mdb-animation-init data-mdb-animation-target="#left-headline">Load Dashboard</button>   
</div>

<!-- Headline Tiles -->
<div class="row">
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="left-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick">
            <p>Headline 1</p>
        </div>
    </div>
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="middle-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick" data-mdb-animation-delay="500">
            <p>Headline 2</p>
        </div>            
    </div>
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="right-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick" data-mdb-animation-delay="1000">
            <p>Headline 3</p>
        </div>            
    </div>
</div>

Kamila Pieńkowska staff answered 10 months ago

If you want to start animation for multiple animations from one button you need to add event listener to the button and trigger animations with JS.

https://mdbootstrap.com/snippets/standard/kpienkowska/6059099


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: DELL laptop Processor 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  • Browser: Chrome
  • OS: Windows 10 Enterprise Version
  • Provided sample code: No
  • Provided link: No