Display various divs onclick in Javascript

Question

I have 3 service panels divs I use javascript to display when they are 'clicked'.

I posted a jsFiddle to show the full content of the panels.

• Make sure jsFiddle is on Javascript (no wrap - in - ) for functions to work

I want to figure out a way to write one function that opens each panel and its inner content. This will eliminate me making a new function and #id for each panel.

<!-- Panel 1 -->
<div class="service-panel" onclick="openService()">

<!-- Panel 2 -->
<div class="service-panel" onclick="openService2()">

<!-- Panel 3 -->
<div class="service-panel" onclick="openService3()">


function openService() {
var x = document.getElementById('open1');
var y = document.getElementById('toggle1');
if (x.style.display === 'none') {
    x.style.display = 'block';
    y.innerHTML = '-';
} else {
    x.style.display = 'none';
    y.innerHTML = '+';
    y.style.color = '#ffffff';
    }
}

function openService2() {
var x = document.getElementById('open2');
var y = document.getElementById('toggle2');
if (x.style.display === 'none') {
    x.style.display = 'block';
    y.innerHTML = '-';
} else {
    x.style.display = 'none';
    y.innerHTML = '+';
    y.style.color = '#ffffff';
    }
}

There has got to be a simple solution to this problem.

https://jsfiddle.net/rrn7fvxt/1/#&togetherjs=jaBJddxmdg

Answer 1

Here's a solution using jQuery:

$(function() {
  $(".open").hide();
  $(".service-panel").click(function() {
    $(this).next().toggle();
    $(this).data("open", !$(this).data("open"));
    $(this).find(".toggle").html($(this).data("open") ? "-" : "+");
  });
});

.section-service {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.container-service {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 1400px;
  height: 100%;
}

.service-panel {
  margin: 0 auto;
  display: block;
  width: 90%;
  height: 50px;
  background-color: #636363;
  margin-bottom: 1px;
  cursor: pointer;
}

.service-panel:hover {
  background-color: #545454;
}

.service-panel-open {
  margin: 0 auto;
  padding: 30px 0px;
  text-align: center;
  width: 90%;
  height: 100%;
  background-color: #ffffff;
  margin-bottom: 1px;
  cursor: pointer;
  transition: 1s;
}


/* Images!!!! */

.container-image {
  margin: 0 auto;
  display: block;
  overflow: hidden;
  max-width: 1000px;
  padding-bottom: 18px;
}

.serImg {
  display: inline-block;
  margin: 10px;
  width: 30%;
  float: left;
}

.container-service-text {
  margin: 0 auto;
  display: block;
  overflow: hidden;
  width: 98%;
}


/* service text */

#serviceName {
  margin: 0 auto;
  padding-left: 7px;
  color: #000000;
  width: 100%;
  float: left;
  text-align: justify;
  font-size: 30px;
}

#serviceDescription {
  margin: 0 auto;
  padding-left: 9px;
  color: #000000;
  width: 92%;
  float: left;
  text-align: justify;
  font-size: 14px;
}

button.reqQuoteBtn {
  display: block;
  margin: 0 auto;
  width: 158px;
  height: 50px;
  padding: 14px 32px 14px 32px;
  background-color: #58B2C5;
  border-radius: 4px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px;
  color: #ffffff;
  font-size: 13px;
}

button.reqQuoteBtn:hover {
  background-color: #4EA7BB;
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

button.reqQuoteBtn:focus {
  outline: none;
}

a {
  text-decoration: none;
}

.serviceName {
  color: #ffffff;
  margin: 0px 20px;
  float: left;
  padding: 14px;
}

.toggle {
  float: right;
  color: #ffffff;
  margin: 0px 20px;
  padding: 14px;
}

.containerCloseAll {
  display: block;
  padding: 5px 0px 60px 0px;
}

#closeAllBtn {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 30px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 30px;
  margin-top: 10px;
  cursor: pointer;
  transition: 1s;
}

#closeAllBtn:hover {
  width: 220px;
}

#closeAllBtn:focus {
  outline: none;
}

@media screen and (max-width: 400px) {
  .serImg {
    float: none;
    width: 100%;
    max-width: 90%;
  }
}

@media screen and (max-width: 515px) {
  .serImg {
    float: none;
    width: 100%;
    max-width: 350px;
  }
  .container-service-text {
    max-width: 370px;
  }
}

@media screen and (max-width: 700px) {
  .serImg {
    width: 46%;
  }
  .service-panel {
    width: 100%;
  }
  .service-panel-open {
    width: 100%;
  }
}

@-webkit-keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fadeIn .5s ease-in 1 forwards;
  animation: fadeIn .5s ease-in 1 forwards;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-service" id="services">
  <div class="margin">
    <div class="container-service">
      <!-- Panel 1 -->
      <div class="service-panel">
        <p class="serviceName">Concrete</p>
        <p class="toggle" id="toggle1">+</p>
      </div>
      <!-- sPanel 1 -->
      <div class="service-panel-open" id="open1" style="display:none;">
        <div class="container-image fade-in">
          <div class="container-service-text">
            <p id="serviceDescription">Description will be placed here for the first.</p>
          </div>
        </div>
        <a href="#contact">
          <button class="reqQuoteBtn">Request Quote</button>
        </a>
      </div>

      <!-- Panel 2 -->
      <div class="service-panel">
        <p class="serviceName">Framing</p>
        <p class="toggle" id="toggle2">+</p>
      </div>
      <!-- sPanel 2 -->
      <div class="service-panel-open" id="open2" style="display:none;">
        <div class="container-image fade-in">
          <div class="container-service-text">
            <p id="serviceDescription">Description will be placed here for the second.</p>
          </div>
        </div>
        <a href="#contact">
          <button class="reqQuoteBtn">Request Quote</button>
        </a>
      </div>

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