javascript - 如何通过单击图像隐藏倒三 Angular 形？

Question

我有一个 fiddle在第二次尝试中，我希望通过单击图像隐藏倒三 Angular 形。

fiddle 的工作方式是在单击单个产品行元素时，该 block 也会显示在底部并带有箭头。

我用于倒三 Angular 形的 HTML 和 CSS 代码(在上面的屏幕截图中标记)是:

HTML:

<div class="arrow-down"></div>

CSS:

.arrow-down {
  width: 0; 
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}

我在 fiddle 中使用的 jquery 代码片段是:

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');


  } else {
    $('#franchisehub').css('background-color', 'green');
    $('#franchisehub p').css('color', 'white');     

    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#cloudbasedmobile p').css('color', '#222222');    

    $('#businessanalytics').css('background-color', 'white');   
    $('#businessanalytics p').css('color', '#222222');   


    $('#techsupport').css('background-color', 'white'); 
    $('#techsupport p').css('color', '#222222');    


    $('#ordermanagement').css('background-color', 'white');  
    $('#ordermanagement p').css('color', '#222222');  


    $('#employeemanagement').css('background-color', 'white'); 
    $('#employeemanagement p').css('color', '#222222'); 


    $('#whitelabel').css('background-color', 'white');
    $('#whitelabel p').css('color', '#222222');

    $('#emailmarketing').css('background-color', 'white');   
    $('#emailmarketing p').css('color', '#222222');  

    $('#royaltycalculator').css('background-color', 'white');  
    $('#royaltycalculator p').css('color', '#222222');

    $('#customizationtools').css('background-color', 'white');
    $('#customizationtools p').css('color', '#222222');

    $('#goalsetting').css('background-color', 'white'); 
   $('#goalsetting p').css('color', '#222222');     

    $('#custominvoicing').css('background-color', 'white'); 
    $('#custominvoicing p').css('color', '#222222'); 

    $('#leadtracking').css('background-color', 'white');
    $('#leadtracking p').css('color', '#222222');

    $('#brandcontrol').css('background-color', 'white');  
    $('#brandcontrol p').css('color', '#222222');   


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

问题陈述:

如上所述，在 fiddle 中有 2 行包含产品项。单击单个产品项时，该 block 也会显示在底部并带有箭头，如果我再次单击该产品项，该 block 将被隐藏。我想要完成的是，我希望在第二次尝试单击产品项时也隐藏箭头。

在上面的 if 逻辑 中的 Jquery 片段中，我提到了 $('.arrow-down').css('display', 'none'); 但它似乎不起作用。

Answer 1

我必须删除一些 HTML 和 JS 才能使代码段正常工作。您的代码达到了 SO 的最大值。

首先我会推荐你​​做一个更模块化的代码。 DRY - 不要重复自己。我添加了 resetAll() 函数，这样您就可以看到您可以完成什么。同样在该函数中，我将箭头设为 block。

稍后，我根据您的 if 条件在您创建的每个监听器上添加了 display: none。

只有 AAA 和 BBB 有效

希望对您有所帮助:>

(function($) { // IIFE to enable `$` as jQuery
  $(function() { // document ready

    $("#franchisehub").click(function() {
      if ($('.franchisehubtv').css('display') == "flex") {
        $('.arrow-down').css('display', 'none');
        $('.franchisehubtv').css('display', 'none');
       
      } else {
        resetAll();
        $('#franchisehub').css('background-color', 'green');
        $('#franchisehub p').css('color', 'white');
        $('.franchisehubtv').css('display', 'flex');
      }

    });

    $("#cloudbasedmobile").click(function() {

      if ($('.cloudbasedtextipad').css('display') == "flex") {
        $('.cloudbasedtextipad').css('display', 'none');
        $('.arrow-down').css('display', 'none');
      } else {
        resetAll();
        $('#cloudbasedmobile').css('background-color', 'green');
        $('#cloudbasedmobile p').css('color', 'white');
        $('.cloudbasedtextipad').css('display', 'flex');
      }
    });

    function resetAll() {

      $('#franchisehub').css('background-color', 'white');
      $('#franchisehub p').css('color', '#222222');

      $('#cloudbasedmobile').css('background-color', 'white');
      $('#cloudbasedmobile p').css('color', '#222222');

      $('#businessanalytics').css('background-color', 'white');
      $('#businessanalytics p').css('color', '#222222');


      $('#techsupport').css('background-color', 'white');
      $('#techsupport p').css('color', '#222222');


      $('#ordermanagement').css('background-color', 'white');
      $('#ordermanagement p').css('color', '#222222');


      $('#employeemanagement').css('background-color', 'white');
      $('#employeemanagement p').css('color', '#222222');


      $('#whitelabel').css('background-color', 'white');
      $('#whitelabel p').css('color', '#222222');

      $('#emailmarketing').css('background-color', 'white');
      $('#emailmarketing p').css('color', '#222222');

      $('#royaltycalculator').css('background-color', 'white');
      $('#royaltycalculator p').css('color', '#222222');

      $('#customizationtools').css('background-color', 'white');
      $('#customizationtools p').css('color', '#222222');

      $('#goalsetting').css('background-color', 'white');
      $('#goalsetting p').css('color', '#222222');

      $('#custominvoicing').css('background-color', 'white');
      $('#custominvoicing p').css('color', '#222222');

      $('#leadtracking').css('background-color', 'white');
      $('#leadtracking p').css('color', '#222222');

      $('#brandcontrol').css('background-color', 'white');
      $('#brandcontrol p').css('color', '#222222');


      $('.franchisehubtv').css('display', 'none');
      $('.cloudbasedtextipad').css('display', 'none');
      $('.business-analytics').css('display', 'none');
      $('.tech-support').css('display', 'none');
      $('.order-management').css('display', 'none');
      $('.employee-management').css('display', 'none');
      $('.white-label').css('display', 'none');
      $('.brand-control').css('display', 'none');
      $('.lead-tracking').css('display', 'none');
      $('.custom-invoicing').css('display', 'none');
      $('.goal-setting').css('display', 'none');
      $('.customization-tools').css('display', 'none');
      $('.royalty-calculator').css('display', 'none');
      $('.email-marketing').css('display', 'none');
      $('.arrow-down').css('display', 'block');

    }
    
  })
})(jQuery)

.product-all-contents {
  background-color: #f0f0f0;
}

.product-contents {
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

.product-contents .product #franchise-hub {
  margin-bottom: 22%;
}

.product-contents .product #cloud-based-mobile {
  margin-bottom: 30%;
}

.product-contents .product #business-analytics {
  margin-bottom: 28%;
}

.product-contents .product #tech-support {
  margin-bottom: 27%;
}

.product-contents .product #order-management {
  margin-bottom: 27%;
}

.product-contents .product #employee-management {
  margin-bottom: 18%;
}

.product-contents .product #white-label {
  margin-bottom: 15%;
}

.product-contents .product #brand-control {
  margin-bottom: 20%;
}

.product-contents .product #lead-tracking {
  margin-bottom: 28%;
}

.product-contents .product #custom-invoicing {
  margin-bottom: 27%;
}

.product-contents .product #goal-setting {
  margin-bottom: 26%;
}

.product-contents .product #customization-tools {
  margin-bottom: 27%;
}

.product-contents .product #royalty-calculator {
  margin-bottom: 27%;
}

.product-contents .product #email-marketing {
  margin-bottom: 24%;
}

.ipads {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.tvs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.cloud-based-text {
  width: 50%;
}

div.cloudbasedtextipad {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.franchise-hub-text {
  width: 50%;
}

div.franchisehubtv {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.business-analytics-text {
  width: 50%;
}

div.business-analytics {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.tech-support-text {
  width: 50%;
}

div.tech-support {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.order-management-text {
  width: 50%;
}

div.order-management {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.employee-management-text {
  width: 50%;
}

div.employee-management {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.white-label-text {
  width: 50%;
}

div.white-label {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.brand-control-text {
  width: 50%;
}

div.brand-control {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.lead-tracking-text {
  width: 50%;
}

div.lead-tracking {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.custom-invoicing-text {
  width: 50%;
}

div.custom-invoicing {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.goal-setting-text {
  width: 50%;
}

div.goal-setting {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.customization-tools-text {
  width: 50%;
}

div.customization-tools {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.royalty-calculator-text {
  width: 50%;
}

div.royalty-calculator {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.email-marketing-text {
  width: 50%;
}

div.email-marketing {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.product-quotes {
  display: block;
  padding: 20px 11px;
  width: 90%;
  color: #3b3b3d;
  background: white;
  border-radius: 2px;
  line-height: 1.625;
  font-family: 'Roboto';
  font-weight: normal;
}

.arrow-down {
  width: 0;
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-all-contents">


  <div class="product-contents">
    <div class="product" id="franchisehub">
      <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942">
      <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2;
         color: rgb(58, 59, 60);">AAA</p>
    </div>

    <div class="product" id="cloudbasedmobile" style="background-color:green;">
      <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">BBB</p>
    </div>
    <div class="product" id="businessanalytics">
      <img id="business-analytics" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">CCC</p>
    </div>
    <div class="product" id="techsupport">
      <img id="tech-support" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';
         margin-right: 9%;
         line-height: 1.2;
         margin-left: 9%;
         color: rgb(58, 59, 60);">DDD</p>
    </div>
    <div class="product" id="ordermanagement">
      <img id="order-management" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">EEE</p>
    </div>
    <div class="product" id="employeemanagement">
      <img id="employee-management" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942">
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%;
         color: rgb(58, 59, 60);">FFF</p>
    </div>
    <div class="product" id="whitelabel">
      <img id="white-label" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942">
      <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 14%;
         margin-right: 14%;
         color: rgb(58, 59, 60);
         ">GGG</p>
    </div>
  </div>
  <div class="product-contents">
    <div class="product" id="brandcontrol">
      <img id="brand-control" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
      <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 8%;
         line-height:1.2;
         margin-right: 8%;
         color: rgb(58, 59, 60);
         ">HHH</p>
    </div>
    <div class="product" id="leadtracking">
      <img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />
      <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 5%;
         margin-right: 5%;
         color: rgb(58, 59, 60);
         ">III</p>
    </div>
    <div class="product" id="custominvoicing">
      <img id="custom-invoicing" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">JJJ</p>
    </div>
    <div class="product" id="goalsetting">
      <img id="goal-setting" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" />
      <p style="font-size: 15px;
         font-family: 'Roboto';
         margin-right: 13%;
         margin-left: 13%;
         line-height: 1.2;
         color: rgb(58, 59, 60);">KKK</p>
    </div>
    <div class="product" id="customizationtools">
      <img id="customization-tools" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2;
         color: rgb(58, 59, 60);">LLL</p>
    </div>
    <div class="product" id="royaltycalculator">
      <img id="royalty-calculator" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
      <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%;
         color: rgb(58, 59, 60);">MMM</p>
    </div>
    <div class="product" id="emailmarketing">
      <img id="email-marketing" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />
      <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 5%;
         margin-right: 5%;
         line-height:1.2;
         color: rgb(58, 59, 60);
         ">NNN</p>
    </div>
  </div>
</div>
<div class="arrow-down"></div>

<div class="franchisehubtv" style="display:none;">
  <div class="franchise-hub-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.png" alt="" width="59" height="59" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Franchise Hub</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Franchise management hubs allow you to support your entire franchise network efficiently and transparently. Branding, invoicing, royalties, products and services, are organized by corporate, and then funneled down through the network as desired.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="cloudbasedtextipad" style="display:flex;">
  <div class="cloud-based-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.png" alt="" width="70" height="50" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Cloud Based &amp; Mobile</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>We’re cloud based and mobile first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay
        up to date.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">

    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>
  </div>
</div>

<div class="business-analytics" style="display:none;">
  <div class="business-analytics-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Business Analytics</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Our business analytics and reports let you see real-time information on everything from hours worked to open orders and payments accepted. All your important daily figures, at a glance.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="tech-support" style="display:none;">
  <div class="tech-support-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.png" alt="" width="54" height="54" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Tech Support</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Whether you, any of your franchisees, or their staff ever need help with BPro software, our support team is a quick online chat, email, or phone call away.
      </p>
      <a style="float:right">Learn More</a>
    </div>
    <div class="tvs">
      <div class="tv">
        <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>

    </div>
  </div>
</div>


<div class="order-management" style="display:none;">
  <div class="order-management-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.png" alt="" width="43" height="52" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Order Management</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Control your sales pipeline with our customizable and consistent order management system. Reference current orders, create new ones, duplicate existing orders and more.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="employee-management" style="display:none;">
  <div class="employee-management-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.png" alt="" width="59" height="59" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Employee Managment</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Simplify your human resources and keep track of important details like employee start dates, birthdays, and payroll, all while being able to keep track of where and when everyone is being most effective.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="white-label" style="display:none;">
  <div class="white-label-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.png" alt="" width="59" height="59" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">White Label</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Sure, we made BPro, but we want it to really be your business software. Your templates, your colours, your logo, your language.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
    <div class="tvs">
      <div class="tv">
        <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>

    </div>
  </div>
</div>

<div class="brand-control" style="display:none;">
  <div class="brand-control-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.png" alt="" width="57" height="57" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Brand Control</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Control your brand across all locations, even internationally with our customizable templates, logo, language and branded colour options. No two locations will ever generate different invoices ever again (unless you want them to).
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>




<div class="lead-tracking" style="display:none;">
  <div class="lead-tracking-text">
    <img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.png" alt="" width="50" height="50" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Lead Tracking & CRM</h6>
    <p style="font-family:'Roboto';font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Take your sales and customer service to the next level with a customer relationship manager designed specifically with franchises and multi-location businesses in mind. Featuring automation, filtering and more.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="custom-invoicing" style="display:none;">
  <div class="custom-invoicing-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.png" alt="" width="51" height="50" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Custom Invoicing</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Our custom invoicing lets you create consistent, professional and personalized invoices that link directly to a payment processing system.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>

<div class="goal-setting" style="display:none;">
  <div class="goal-setting-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.png" alt="" width="50" height="51" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Goal Setting</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>Goals are important! Make sure they’re communicated throughout your franchise network with our goal setting tool. Different goals for different locations or hubs? No problem.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>


<div class="email-marketing" style="display:none;">
  <div class="email-marketing-text">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.png" alt="" width="51" height="52" style="margin-bottom:10%;">
    <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Email Marketing</h6>
    <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p>
    <div class="product-quotes">
      <p>With a franchise or multi-location business, we know you don’t always want all customers to be connected to the same email campaign, that’s why we established an integration with Emma. Keep things running with automated campaigns and customer info
        pushes from BPro to Emma.
      </p>
      <a style="float:right;">Learn More</a>
    </div>
  </div>
  <div class="tvs">
    <div class="tv">
      <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
    </div>

  </div>
</div>