Show/Hide Not Working Landing Page

[kenmckown]

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?

[SanfordWhiteman]

<section> works fine with display:none. Please link to your LP as it must be something else.

[kenmckown]

Sure, I tossed a test page out there: https://go.autoshopsolutions.com/New-Template-Test.html

[SanfordWhiteman]

You’re also setting display:flex which by definition overrides none.

[Dave_Roberts · Accepted solution]

Sanford is spot on here.

Here's a look at what a solution would look like in your code:

<meta class="mktoBoolean" id="showNewHero" mktoname="Show New Hero?" default="true" true_value="flex" false_value="none" false_value_name="Hide" true_value_name="Show">

Note: Changed true_value="block" to true_value="flex"

.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;
  width:100%;
  background-position: center;
}

Note: Removed "display: flex;"