I am building a guided LP and am having issues with hide/show sections.
This is my meta code:
<meta class="mktoBoolean" id="showNewHero" mktoname="Show New Hero?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
This is my CSS:
.newHero {
display: ${showNewHero};
background-color: ${newHeroBG};
color:#fff;
background-image: url('https://go.autoshopsolutions.com/rs/180-DGD-014/images/MOQ4198_Mask Group 4.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
width:100%;
background-position: center;
}
This is my HTML section:
<section class="newHero">
<div class="container">
<div class="row" style="padding-top:30px; padding-bottom:30px;" id="newHeroContainer">
<div class="col-md-12" style="margin-bottom:100px;">
<div class="mktoImg" id="headerImg" mktoName="Header Logo"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/SB Logo HorizontalLeft_Light.png" width="300px;"></div>
</div>
<div class="col-md-7">
<div class="mktoText" id="heroText1" mktoName="Hero Text 1" style="font-family: Zuume, Impact; font-size:50px; line-height:.5;">TEST-DRIVE SHOP BOSS AT</div>
<div class="mktoText" id="heroText2" mktoName="Hero Text 2" style="font-family: Zuume, Impact; font-size:50px; color:#dd2527; font-style: italic;">SEMA IN LAS VEGAS!</div>
<div class="mktoText" id="heroText3" mktoName="Hero Text 3" style="margin-bottom:50px;">Shop Boss has everything you need to generate professional-looking estimates, access parts suppliers and labor guides, manage payroll, track technician hours, monitor business KPIs, add appointment scheduling to your website, and deliver a better customer experience with Shop Boss' integrated DVI and Text-to-Pay functionality.</div>
</div>
<div class="col-md-5" style="text-align:center;">
<div class="mktoImg" id="semaImg" mktoName="SEMA Logo" style="margin-bottom:25px;"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/MOQ4198_SEMA Logo.png"></div>
<div class="mktoText" id="bookADemo1" mktoName="Book a Demo 1">
<div class="buttonSEMA"><a href="#">Book a Demo at SEMA</a></div>
</div>
</div>
</div>
</div>
</section>
When I remove it in the LP, it remains. Can we not use these on <section> tags?
.png)