This is how my code looks like now:
JS:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var ix = Webflow.require('ix');
var $el = ('.mgtdetailprofile-block');
var trigger = {"type":"click","stepsA":[{"height":"auto","transition":"height 800ms ease-in-out-expo 0ms"}],"stepsB":[]}
ix.run(trigger, $el);
});
</script>
HTML:
<a class="moretext-span" data-ix="show-management-detail-profile" href="#">MORE</a>
My Target Div:
<div class="w-clearfix mgtdetailprofile-block" id="{tag_itemid}"><a class="mgtprofile-closelink" href="#" data-ix="close-management-detail-profile"><strong>X</strong></a>
<div class="w-row mgtdetailedrow">
<div class="w-col w-col-6 mgtdetailedpix-col" id="mgtpixdetailed{tag_itemid}" style="background-image: url({tag_managementpicture_value}); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
</div>
<div class="w-col w-col-6">
<h2 class="mgtnametitle detail">{{name}}</h2>
<p class="mgt-p detail">{{description}} </div>
</div>
</div>
But it is not working. What could I be doing wrongly?