How to hide an inverted triangle with on click of an image?

Question

I have a fiddle in which I want the inverted triangle shape to be hidden with on click of an image in the 2nd attempt.

The fiddle is working in a way that on click of an individual product row items, the block gets display at the bottom with the arrow as well.

The HTML and CSS codes which I have used for the inverted triangle shape (marked in the screenshot above) are:

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;
}

The snippets of jquery code which I have used in the fiddle are:

$("#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');
  }

});

Problem Statement:

As explained above, in the fiddle there are 2 rows with product items. On clicking of an individual product item, the block gets display at the bottom with the arrow as well and if I click back that product item again, the block gets hidden. What I want to accomplish is I want the arrow to be hidden as well when the product item is clicked in the 2nd attempt.

In the Jquery snippets above in the if logic, I have mentioned $('.arrow-down').css('display', 'none'); but it doesn't seem to work.

A suggestion: Why not put a common class on all of these items, so you can just do `$(".myclass p').css('color', '#222222');` and `$('.otherclass').hide();`? Additionally, you have a ton of repeated in-line styling in your HTML, what could easily be a few lines of CSS. You're much more likely to find an answer to this if you clean up a bit. — Tyler Roper, May 31 '18 at 17:39
@TylerRoper Can you give me a demo in the [fiddle](https://jsfiddle.net/qdyLL0ww/embedded/result/) ? — flash, May 31 '18 at 17:41
[Something like this](https://jsfiddle.net/bx7qxsgx/1/) would be a better approach. All of my products are tagged with `class="product"`, meaning I can use *one* click event to correspond to all of them. Additionally, I can use `$(this)` to correspond to the specific one that was clicked. The logic is "On click, turn all products white, then turn the clicked one green." My honest advice would be to stop where you are and completely refactor your approach, rather than addressing this one particular issue. **EDIT:** Added comments to the fiddle. — Tyler Roper, May 31 '18 at 17:47

score 2 · Accepted Answer · answered May 31 '18 at 17:44

I had to remove some HTML and JS to make the snippet work. Your code hit the max of SO.

First of all I will recommend you to make a more modular code. DRY - Don't Repeat Yourself. I have added the function resetAll() so you can see what you can acomplish. Also in that function i make the arrow a block.

Later on each listener you made i have added the display: none based on your if condition.

Only AAA and BBB work

Hope this helps :>

(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>

I will definitely try to follow what you have written and try to minimize the repetition. — flash, May 31 '18 at 18:25
I have a similar [question](https://stackoverflow.com/questions/50661303/how-to-horizontally-scroll-the-contents-in-mobile-tablet-view-in-html-css/50661405?noredirect=1#comment88333103_50661405). I am wondering if you can help me out or can give me a pointer. — flash, Jun 03 '18 at 06:12

score 2 · Answer 2 · answered May 31 '18 at 17:57

I think you should ditch the inline css and start using classes. Here is a cleaner solution for the triangle issue.

<script type="text/javascript">
   var $product = $('.product');
   var $triangle = $('.arrow-down');

   $product.on('click', onProductClick);

   function onProductClick(){
      // If you have already clicked on the item
      if($(this).hasClass('clicked')){
         $triangle.hide();
      }else{
         $triangle.show();
      }

      $product.removeClass('clicked');
      $(this).addClass('clicked')
   }
</script>

nalgenes · Answer 3 · 2018-05-31T18:00:42.057

I tried using $('.arrow-down').css('display', 'none'); and it works for me in your fiddle. I am not sure why it did not work for you.

You should also create 1 function to set the display of all of your divs to none and then change the selected one to display: flex. This removes a lot of copy paste code, allows you to add and remove options more easily, and reduces the amount of code drastically. This should also be done with color and background-color.

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

    // ... Remaining part of your else statement
    // Change the colors of all divs
    // This should be in another generic function

    // Hide all divs and then display the selected one
    hideAll()
    $('.franchisehubtv').css('display', 'flex'); 
  }
});


function hideAll(){
    $('.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');
}

How to hide an inverted triangle with on click of an image?

3 Answers3