Topic: Multiple onClick Animation Targets from single button
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 8 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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