# GDPR toggle text to hide/show

**URL:** <https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405>\
**Category:** CMS Development\
**Created:** [September 27, 2018, 11:19am UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405 "2018-09-27T11:19:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [September 27, 2018, 11:19am UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/1 "2018-09-27T11:19:25Z")

</div>

GDPR texts are quite long and annoying, so how can I have an arrow/button/something which toggles the gdpr text, but so that the checkboxes and their ‘titles’ remain? e.g. there would be a short line of text ‘Click here to show the GDPR text’ with a small arrow in the end, which transforms into the gdpr textbox when clicked on.

I found in another post how to target these textboxes with css, but I guess this requires a little js as well.

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 27, 2018, 11:50am UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/2 "2018-09-27T11:50:34Z")

</div>

[@tette\_engage](https://community.hubspot.com/t5/user/viewprofilepage/user-id/70145) - link us to a preview of your form please

---

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [September 27, 2018, 12:01pm UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/3 "2018-09-27T12:01:00Z")

</div>

@tjoyce

Here:

[www.prometheusone.io/home](http://www.prometheusone.io/home)

One form is after the pricing, another is in a popup (very functioning and very cool, wonder where I got it from.. 😛 ) form way down in the black subscribe box.

---

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [September 27, 2018, 12:47pm UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/4 "2018-09-27T12:47:32Z")

</div>

@tjoyce

I noticed another peculiar thing. When I add the popup form’s custom html to this ‘home’ page, it makes my header or footer behave weirdly. If I drag it before the Hero Banner module, my footer gets upset and jumps on top of everything. If I drag it one step upwards, so its right beneath the header, then my header disappears (but footer acts normally). I’ll include a screenshot for clarification (this lay-out disturbs my footer):

 ![Screen Shot 2018-09-27 at 11.50.48.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/5/955e786922c2ea65193daa22e8bdb0c17a246c01.png)

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 27, 2018, 12:51pm UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/5 "2018-09-27T12:51:17Z")

</div>

[@tette\_engage](https://community.hubspot.com/t5/user/viewprofilepage/user-id/70145) - oh man, that popup looks sweet 😄

okay, so this was a fun challenge. Here’s a [plunkr showing the functionality](https://plnkr.co/edit/EkqwI1aIT4jsixSShK8L?p=preview)

basically add an onFormSubmit callback to the form and then drop the css into your page.

```auto
 <script>
 hbspt.forms.create({
 target: ".Belch-86JoF0tRiAFjTpzyqu47",
 portalId: "4590271",
 formId: "efd2ec61-5a5e-4075-9ed1-421445261989",
 onFormReady: function($form){

 $form.find('.legal-consent-container .hs-richtext').each(function(){
 $(this).addClass('collapse').attr('tabindex', '1')
 });

 }
 });
 </script>

```

```auto
 <style>
 .collapse{
 position:relative;
 box-sizing:border-box;
 font-size:16px;
 line-height:1.4;
 height:1.4em;
 max-height:1.4em;
 transition:max-height 1s ease-in-out;
 overflow:hidden;
}
.collapse:before{
 content:'Click to Expand';
 position:relative;
 display:inline-block;
 box-sizing:border-box;
 font-size:calc(1em - 2px);
 padding:0 10px;
 border:1px solid #000;
 margin-left:10px;
 float: right;
}
.collapse:focus{
 height:auto;
 max-height:400px;
}
.collapse:focus:before{
 display:none;
}

 </style>

```

Can you please create a new question for that second question you asked? Just trying to keep the forums a little more concise.

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [September 27, 2018, 1:27pm UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/6 "2018-09-27T13:27:49Z")

</div>

@tjoyce

Could you elaborate a little? 😄 I can handle the css, but i can’t figure out the onFormSubmit / js 🙂 and sure, i’ll make another ticket with problem #2

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 27, 2018, 1:32pm UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/7 "2018-09-27T13:32:35Z")

</div>

sure, this one is a little tricky. in your embed code, insert the code below after the **css:“”** - see screenshot **(the preceeding comma in the code below, be sure to copy that too, it looks like a mistake, but it’s not :D)**

 ![comma.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/3/37c4937883d10dfe7bc9098bd8d907bb84753250.png)

`,onFormReady: function($form){$form.find('.legal-consent-container .hs-richtext').each(function(){$(this).addClass('collapse').attr('tabindex', '1')});}`

---

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [September 28, 2018, 6:36am UTC](https://community.hubspot.com/t/gdpr-toggle-text-to-hide-show/10405/8 "2018-09-28T06:36:33Z")

</div>

@tjoyce

That did the trick! Now where would I put the code in a regular form-module?