Is it possible to design an image after checkbox is checked

SOLVE
st_ruangguru
Member

check2.PNGcheck1.PNG

Is it possible for me to design that line after the checkbox is being checked? BTW the line is an image not a hr attribute

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@st_ruangguru

You could put some logic in your HS embed code to maybe add an extra class to your line image. Something like: 

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: "",
                onFormReady: function(form){
                    form.find("input[type='checkbox']").change(function() {
                        if(this.checked) {
                            $('.line').addClass('toggleChecked')
                        }else{
                            $('.line').removeClass('toggleChecked')
                        }
                    });
                }
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

Once you get that javascript working. You can use the css class that gets added to your image when the checkbox is checked to add more css to the line image

 


tim@belch.io | https://forms.belch.io

View solution in original post

0 Upvotes
3 Replies 3
tjoyce
Recognized Expert | Platinum Partner

@st_ruangguru

If the image is a direct sibling of the checkbox, then you can do it with css: 

input[type=checkbox]:checked + img {
    margin-top:50px;
}

If it's not a sibling, then you will need to do it with jQuery. If you give us a preview link to tinker with, we can give you the exact code you need to drop into your page. 

 

Here's what I mean by sibling:

<input type="checkbox">
<img src="someimage" />

And here's an example that is NOT a sibling:

<div>
     <input type="checkbox">
</div>
<img src="someimage" />

tim@belch.io | https://forms.belch.io

0 Upvotes
st_ruangguru
Member

 

@tjoyce sorry for late reply here is the code of what I am doing right now

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: ""
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

 

Is this also count as a sibling?

 

0 Upvotes
tjoyce
Solution
Recognized Expert | Platinum Partner

@st_ruangguru

You could put some logic in your HS embed code to maybe add an extra class to your line image. Something like: 

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: "",
                onFormReady: function(form){
                    form.find("input[type='checkbox']").change(function() {
                        if(this.checked) {
                            $('.line').addClass('toggleChecked')
                        }else{
                            $('.line').removeClass('toggleChecked')
                        }
                    });
                }
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

Once you get that javascript working. You can use the css class that gets added to your image when the checkbox is checked to add more css to the line image

 


tim@belch.io | https://forms.belch.io

View solution in original post

0 Upvotes