CMS Development

st_ruangguru
Membro

Is it possible to design an image after checkbox is checked

resolver

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 Avaliação positiva
1 Solução aceita
tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Is it possible to design an image after checkbox is checked

resolver

@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

Exibir solução no post original

0 Avaliação positiva
3 Respostas 3
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Is it possible to design an image after checkbox is checked

resolver

@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 Avaliação positiva
st_ruangguru
Membro

Is it possible to design an image after checkbox is checked

resolver

 

@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 Avaliação positiva
tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Is it possible to design an image after checkbox is checked

resolver

@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

0 Avaliação positiva