buttons

Highlighted
New Member
3 0 0

I have the below code and I am trying to get buttons on all the elements. The way it is below it only shows for the first one.

How do I loop through all the elements in the class so each block has a button?

 

<div class="Feature-{{section.id}}">
<div class="responsive cv_feature_blocks">
{% for block in section.blocks %}
<div onclick="myFunction()" class="cv_feature_content">
{% if block.settings.cv_feature_icon != blank %}
<button type="button" ><img src="{{block.settings.cv_feature_icon | img_url:'medium'}}" class="cv_feature_img_fluid"></button>
{% endif %}
{% if block.settings.featured_title != blank %}
<span class="cv_feature_text">
<h3>{{ block.settings.featured_title}}</h3>
</span>
{% endif %}
{% if block.settings.cv_feature_content != blank %}
<span class="feature_paragraph_content">
<p id="feature_paragraph_content">{{ block.settings.cv_feature_content}}</p>
</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>


<script>

function myFunction() {
var x = document.getElementById("feature_paragraph_content");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

$('.responsive').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
</script>

0 Likes