Show/hide an audio player using tabs or hidden rows?

[cinematic6436 (Brian)]

Hello –

My goal is to have four buttons on the left separate from an audio player I purchased on the right. Since one player can’t load up a new playlist at the click of a button, a new audio player is required for each playlist. My goal is to give the appearance that a new playlist is loading in the same player.

Unless anyone has a better suggestion, I think I can accomplish this with tabs. Each button could link to each tab & reveal the contents when clicked – when the user clicks the first button, playlist #1 appears & plays. When the user clicks the second button, playlist #2 appears & plays, etc. I need to use buttons instead of the tabs themselves so I can move them to any position and space them apart.

The developer of the audio player provided me with the following Javascript for the buttons –

jQuery(document).on(‘click’, ‘#your-button-id’, function(event) {
jQuery(‘#audioigniter-179 .ai-track-control’).eq(‘0’).trigger(‘click’);
event.preventDefault();
});

The buttons start a playlist, but the user still has to switch tabs. Is it possible to configure the buttons to switch tabs and start a playlist when a one is clicked?

I’d also like to eliminate the appearance of tabs themselves since the buttons would make them redundant – again to give the appearance the playlists are starting in one player.

As a first step I tried implementing what’s described in the link below but can’t get it to work. Regarding the first post, if I paste the CSS & Javascript codes to their respective fields & publish my page, it doesn’t load – I just get a blank, white screen.

Toggle button for showing and hiding a row

I created a similar effect for Elementor, but had issues doing the same for BB. wpbeaverworld was kind enough to show me how to do the same thing on BB. Here are the code snippets for implementing this custom functionality. Add a row and configure its settings as follows: ID: [Enter ID to identify the row] Class: toggle-section Note: The name of the class can be something else. Add a button above the row and configure its settings as follows: Text: [Enter Name of Button] Link: JavaScr…

I tried pasting what Chris Johnston posted in his Feb. 2022 post in the Javascript field, but instead of making the row disappear, it brings me up to the very top of my page when I click the button.

Any suggestions anyone could provide would be greatly appreciated!

Thanks,
Brian

[cinematic6436 (Brian)]

I found & installed WonderPlugin’s Carousel today, and the developer posted a link describing basically what I needed to do. Instead of pasting what he has for buttons in an HTML module, you can add your own Beaver Builder button and put “goto-slide-1” in Button Settings > Advanced > Class. Then paste the Javascript code from the link in “3. Options” in the settings for the Carousel plugin, and you’re good to go. I put the shortcode for the audio player in each slide.

I think I’m stuck with a slide/fade/flip transition instead of just a simple player switch, but I think I like it better this way.