Add a close button to sticky Reviews

@haukemedia You can add functionality using some JavaScript/jQuery. I’ll post something here shortly.

@haukemedia Thanks for posting the fixed example – I know a few people wanted something similar. You can add this code to your preferred script file:

jQuery('.google-business-reviews-rating.badge.tiny').prepend('<span id="google-business-reviews-rating-close" class="close">&times;</span>');
jQuery('#google-business-reviews-rating-close').on('click', function() { jQuery(this).closest('.google-business-reviews-rating').hide(); });

You can style the close class here to position it appropriately.

I’d also recommend setting the main element not as fixed for smaller screens so it will appear within the main content of the page.

@haukemedia And you can edit the “review” word to “Bewertungen” using the Shortcode parameter. When the translation is available in German, this won’t be needed.

Thanks for the fast support! It works very well. The only Problem is that the close button links to the Google review page. Do you know a solution for this?

@haukemedia Yes, you can use the CSS: z-index to place it above the other elements. I would add some CSS to make it appear as a link. If that doesn’t you can prevent the default action in jQuery such as:

jQuery('.google-business-reviews-rating.badge.tiny').prepend('<span id="google-business-reviews-rating-close" class="close">&times;</span>');
jQuery('#google-business-reviews-rating-close').on('click', function(event) { event.preventDefault(); jQuery(this).closest('.google-business-reviews-rating').hide(); });

I haven’t tested any of this, so I cannot say if it will work, but it will get you on the right path.

I may add this all to a future version as a fully responsive version that places this on the left, bottom or right sides, with a toggle and fall-back for smaller screens (such as showing within the main content).

Thanks for the fast answer. I’ve tried it with the new code and gave a high z-index, but it’s still open a new tab. I don’t know how to fix it.

@haukemedia Actually, it’s unrelated to the z-index here, you can take it out.

Both events are being triggered, rather than just the one. So, try using this instead:

jQuery('.google-business-reviews-rating.badge.tiny').prepend('<span id="google-business-reviews-rating-close" class="close">&times;</span>');
jQuery('#google-business-reviews-rating-close').on('click', function(event) { event.stopPropagation(); jQuery(this).closest('.google-business-reviews-rating').hide(); });

Switch “preventDefault” for “stopPropagation”.