Skip to main content

How can I change the [#DETAILS#]-value to show/hide after click?



  • Hi Marvin,

    You could change toggle the [#DETAILS#]-value from "show details"/"hide details" from the button by using event listener. For that purpose you should use javascript to set the custom texts you'd like to use, wrap them in an event listener attached to CookiebotOnDialogInit. Below example shows how to change the text on the 'Show details' button on a multilevel type dialog.  

    <script type="text/javascript">

    window.addEventListener('CookiebotOnDialogInit', function (e) {
    CookiebotDialog.showDetailsText = 'Expand information';
    CookiebotDialog.hideDetailsText = 'Hide detailed information';
    }, false);


    Of course, you could change the text content of showDetailsText and hideDetailsText to what your preferences are! 
    For more detailed information you could check out this article:


  • CookieMagic

    The above is not supporting multi-language (CookiebotDialog.hideDetailsText = 'Hide detailed information';) and will not (per definition) work with custom banners.

    A better method would be to get the translated values of"Text in [Show details] button" and "Text in [Hide details] button" from the CookiebotDialog object.

    Example in your case would be:

    document.getElementById("cookiebanner__showMoreBtn").addEventListener('click', event => {
    var moreContainer = document.getElementById("cookiebanner__more");
    var moreButton = document.getElementById("cookiebanner__showMoreBtn");

    if ( === "none") { = "block";
    moreButton.innerHTML = CookiebotDialog.hideDetailsText;
    } else { = "none";
    moreButton.innerHTML = CookiebotDialog.showDetailsText;

    You can check out our custom banner designs they might offer a good starting point for your needs.


  • CookieMagic

    CookiebotDialog.hideDetailsText is not working anymore. You should now use CookieConsent.dialog.hideDetailsText


Please sign in to leave a comment.