Change Container on Button Hover with Generate Blocks by only 4 Best Steps

1. Step 1
2. Step 2
3. Step 3
4. Step 4
5. Conclusion

As we know we need a plugin with every functionality added but not this time let’s make a container that changes on button click

Step 1 :

Add classes to the Container in Blocks > Advanced > Additional CSS CLASS(ES) You need to add classes like this

all-img img-1 //for first Container
all-img img-2 //for second Container
all-img img-3 //for third Container
all-img img-4 //for fourth Container
all-img img-5 //for fifth Container

Step 2 :

After that you need to go your button blocks > Advanced > CUSTOM ATTRIBUTES You need add a custom attribute

Data-showme :  img-1  //for first button
Data-showme :  img-2  //for second button
Data-showme :  img-3  //for third button
Data-showme :  img-4  //for fourth button
Data-showme :  img-5  //for fifth button

Step 3 :

Add the code by going to html > and insert this JS code by using the script tags and linking it to jquery, This let you change the container on the basis of the button you clicked.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Step 4 :

At you just need to add a code to additional CSS in WordPress dashboard you go it by Appearance and then navigate to customize and then go to additional CSS.

.all-img{
	display:none;
}
.img-1{
	Display:inline
}

Conclusion :

Generate Blocks is a powerful WordPress plugin that enables users to create custom page layouts and designs quickly and easily. Its intuitive drag-and-drop interface, flexible block options, and extensive customization settings make it a popular choice for website owners, designers, and developers alike. Whether you’re building a simple blog or a complex website, GenerateBlocks can help you create beautiful, responsive content that stands out from the crowd. So if you’re looking for a fast, efficient, and user-friendly way to design your WordPress site, Generate Blocks is definitely worth considering.