Is it possible to design an image after checkbox is checked

[st_ruangguru]

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

[tjoyce]

@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

[st_ruangguru]

@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?

[tjoyce · Accepted solution]

@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