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

Marvin Vrdoljak

• April 15, 2020 12:41

Trying to find out how to toggle the [#DETAILS#]-value from "show details"/"hide details" in the right language after click. Here my Code:

HTML:

<div class="cookiebanner" id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable>
....
<a href="javascript:void(0)" id="cookiebanner__showMoreBtn">[#DETAILS#]</a>
<div class="cookiebanner__more" id="cookiebanner__more" style="display: none">
...
</div>
</div>

JS:

document.getElementById("cookiebanner__showMoreBtn").addEventListener('click', event => {
var moreContainer = document.getElementById("cookiebanner__more");
if (moreContainer.style.display === "none") {
moreContainer.style.display = "block";
} else {
moreContainer.style.display = "none";
}
});

0

• 

  Spas – vConnect – Community Supporter

  • April 16, 2020 07:21

  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);
  
  </script>

  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: https://support.cookiebot.com/hc/en-us/articles/360010631893-Custom-texts-on-buttons

  Regards,
  Spas

  0
• 

  CookieMagic

  • September 22, 2020 08:21
  • Edited

  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 (moreContainer.style.display === "none") {
  moreContainer.style.display = "block";
  moreButton.innerHTML = CookiebotDialog.hideDetailsText;
  } else {
  moreContainer.style.display = "none";
  moreButton.innerHTML = CookiebotDialog.showDetailsText;
  }
  });

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

   

  0
• 

  CookieMagic

  • February 28, 2021 14:19

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

  0

Please sign in to leave a comment.