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

Hitori Tech
  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=""></script>
var $ = jQuery
    $('[data-showme]').hover( function(){
        var showme = $(this).attr('data-showme')
        $('.' + showme).show()

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.


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.

Leave a Comment