Issue with Second Accordion Panel not refreshing

Question

Issue with Second Accordion Panel not refreshing

Within my accordion setup, the initial panel showcases a selection of icons. Upon choosing one of these icons, it triggers the display of one of three panels in place of the second accordion panel, based on the selected icon. The issue seems to be rooted in the JavaScript implementation and the organization within the div.panel class.

HTML

<button class="accordion">
                    <h2 class="float-left">1.</h2>
                    <h2 class="text-center">Screen Type</h2></button> 
                <div class="panel text-center" id="type_panel">
                  <!-- Icon selection labels here -->
                </div>
                <form action="" id="tallyForm" onsubmit="return false;">
                    <button class="accordion">
                        <h2 class="float-left">2.</h2>
                        <h2 class="text-center">Model</h2></button>
                    <div class="panel" id="default_panel">
                      <!-- Model selection options here -->
                    </div>
                    <div class="panel invisible" id="laptop_panel">
                      <!-- Laptop model choices here -->
                    </div>
                    <div class="panel invisible" id="tablet_panel">
                      <!-- Tablet model choices here -->
                    </div>
                    <div class="panel invisible" id="phone_panel">
                      <!-- Phone model options here -->
                    </div>

CSS

JS

JSFIDDLE

Link to JSFiddle

javascript jquery html css

Answer 1

Answer №1

You should define max-height on the element with the class .showing because its parent element div.panel has a max-height: 0 property.

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}
$("#laptop_button").click(function() {
  $('#default_panel').addClass('invisible');
  $('#laptop_panel').removeClass('invisible');
  $('#laptop_panel').addClass('showing');
  $('#tablet_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#tablet_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#tablet_panel").removeClass('invisible');
  $('#tablet_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#phone_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#phone_panel").removeClass('invisible');
  $('#phone_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#tablet_panel').addClass('invisible');
});

.icon-select {
  margin-right: 20px;
  margin-left: 20px;
}

#col1 {
  float: left;
  width: 33%;
  height: 100%;
}

#col2 {
  float: center;
  height: 100%;
  width: 33%;
  overflow: hidden;
  display: table-cell;
}

#col3 {
  float: right;
  height: 100%;
  width: 34%;
  margin-left: 20px;
  overflow: hidden;
  display: table-cell;
}

button.accordion {
  background-color: #ffffff;
  color: #444;
  cursor: pointer;
  padding: 2px;
  width: 50%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-left: 1px solid #6fdd7a;
  border-right: 1px solid #6fdd7a;
  border-top: 1px solid #6fdd7a;
  border-radius: 4px;
  border-bottom: none;
}

button.accordion.active,
button.accordion:hover {
  background-color: #6fdd7a;
  color: #ffffff;
}

div.panel {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  width: 46%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

#optional_panel {
  border-bottom: 1px solid #6fdd7a;
}

label > input {
  visibility: hidden;
  position: absolute;
}

label > input + img {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  -webkit-transition: all 0.25s linear;
}

label > input:checked + img {
  background-color: #6fdd7a;
}

.invisible {
  display: none;
}

div.showing {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 600px;
  overflow: hidden;
  width: 46%;
  max-height: 100%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

// JUST STYLES THE RADIO BUTTONS AND 
.control {
  font-size: 18px;
  position: relative;
  display: block;
  margin-bottom: 15px;
  padding-left: 30px;
  cursor: pointer;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolut...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">
  <h2 class="float-left">1.</h2>
  <h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
  <label class="icon-select">
    <input type="radio" name="type" id="laptop_button" /> <img src="icons/iconmonstr-laptop-4-120.png" alt="laptop"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="tablet_button" /> <img src="icons/iconmonstr-tablet-1-120.png" alt="tablet"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="phone_button" /> <img src="icons/iconmonstr-smartphone-3-120.png" alt="phone"> </label>
</div>
<form action="" id="tallyForm" onsubmit="return false;">
  <button class="accordion">
    <h2 class="float-left">2.</h2>
    <h2 class="text-center">Model</h2></button>
  <div class="panel" id="default_panel">
    <label>
      <h3 class="text-center">Please select a Device Type above</h3></label>
  </div>
  <div class="panel invisible" id="laptop_panel">
    <div id="col1">
      <label class="control control--radio">LAPTOP
        <input type="radio" name="radio-model" value="laptop1" />
        <div class="control__indicator"></div>
      </label>
    </div>
    ...
  </div>
  <div class="panel invisible" id="tablet_panel">
    <div id="col1">
      <label class="control control--radio">iPad 2
        <input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
        <div class="control__indicator"></div>
      </label>
      ...
  </div>
  <div class="panel invisible" id="phone_panel">
    <div id="col1">
      <label class="control control--radio">iPhone 3 &amp; 4
        <input type="radio" name="radio-model" value="phone-iphone3" />
        <div class="control__indicator"></div>
      </label>
      ...
  </div>

Answer 2

You should define max-height on the element with the class .showing because its parent element div.panel has a max-height: 0 property.

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}
$("#laptop_button").click(function() {
  $('#default_panel').addClass('invisible');
  $('#laptop_panel').removeClass('invisible');
  $('#laptop_panel').addClass('showing');
  $('#tablet_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#tablet_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#tablet_panel").removeClass('invisible');
  $('#tablet_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#phone_panel').addClass('invisible');
});
$("#phone_button").click(function() {
  $('#default_panel').addClass('invisible');
  $("#phone_panel").removeClass('invisible');
  $('#phone_panel').addClass('showing');
  $('#laptop_panel').addClass('invisible');
  $('#tablet_panel').addClass('invisible');
});

.icon-select {
  margin-right: 20px;
  margin-left: 20px;
}

#col1 {
  float: left;
  width: 33%;
  height: 100%;
}

#col2 {
  float: center;
  height: 100%;
  width: 33%;
  overflow: hidden;
  display: table-cell;
}

#col3 {
  float: right;
  height: 100%;
  width: 34%;
  margin-left: 20px;
  overflow: hidden;
  display: table-cell;
}

button.accordion {
  background-color: #ffffff;
  color: #444;
  cursor: pointer;
  padding: 2px;
  width: 50%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-left: 1px solid #6fdd7a;
  border-right: 1px solid #6fdd7a;
  border-top: 1px solid #6fdd7a;
  border-radius: 4px;
  border-bottom: none;
}

button.accordion.active,
button.accordion:hover {
  background-color: #6fdd7a;
  color: #ffffff;
}

div.panel {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  width: 46%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

#optional_panel {
  border-bottom: 1px solid #6fdd7a;
}

label > input {
  visibility: hidden;
  position: absolute;
}

label > input + img {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  -webkit-transition: all 0.25s linear;
}

label > input:checked + img {
  background-color: #6fdd7a;
}

.invisible {
  display: none;
}

div.showing {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 600px;
  overflow: hidden;
  width: 46%;
  max-height: 100%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

// JUST STYLES THE RADIO BUTTONS AND 
.control {
  font-size: 18px;
  position: relative;
  display: block;
  margin-bottom: 15px;
  padding-left: 30px;
  cursor: pointer;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolut...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">
  <h2 class="float-left">1.</h2>
  <h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
  <label class="icon-select">
    <input type="radio" name="type" id="laptop_button" /> <img src="icons/iconmonstr-laptop-4-120.png" alt="laptop"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="tablet_button" /> <img src="icons/iconmonstr-tablet-1-120.png" alt="tablet"> </label>
  <label class="icon-select">
    <input type="radio" name="type" id="phone_button" /> <img src="icons/iconmonstr-smartphone-3-120.png" alt="phone"> </label>
</div>
<form action="" id="tallyForm" onsubmit="return false;">
  <button class="accordion">
    <h2 class="float-left">2.</h2>
    <h2 class="text-center">Model</h2></button>
  <div class="panel" id="default_panel">
    <label>
      <h3 class="text-center">Please select a Device Type above</h3></label>
  </div>
  <div class="panel invisible" id="laptop_panel">
    <div id="col1">
      <label class="control control--radio">LAPTOP
        <input type="radio" name="radio-model" value="laptop1" />
        <div class="control__indicator"></div>
      </label>
    </div>
    ...
  </div>
  <div class="panel invisible" id="tablet_panel">
    <div id="col1">
      <label class="control control--radio">iPad 2
        <input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
        <div class="control__indicator"></div>
      </label>
      ...
  </div>
  <div class="panel invisible" id="phone_panel">
    <div id="col1">
      <label class="control control--radio">iPhone 3 &amp; 4
        <input type="radio" name="radio-model" value="phone-iphone3" />
        <div class="control__indicator"></div>
      </label>
      ...
  </div>

Issue with Second Accordion Panel not refreshing

Answer №1

Similar questions

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Having trouble converting an Amazon S3 function into promises with when/node

JavaScript - An unexpected error occurred: Syntax error, unrecognized expression: [href=#contact] (WordPress)

When attempting to execute Protractor tests, an error occurs stating that the object #<Object> does not possess the 'getInstance' method

Display all attribute connections for a product in Prestashop

What is the best way to ensure a textfield remains aligned with its label in ExtJS?

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

Can CSS be used to create curved dashed lines?

How can attributes be passed to a Vue JS computed property getter and setter?

Is JavaScript necessary for this task in PHP?

I am encountering an issue where propData in Vue Jest is returning as undefined

Obtain the URL value using jQuery and place it inside a <span> element

Personalizing the Twitter Embedded Timeline

Starting your React application with the `npm start` command

altering dimensions in three.js

Locating marker coordinates on the screen with AR.js

The object in question does not have the capability to support the "live" property or method

Show feedback on the webpage

jQuery Ajax fails to serialize the input type file field

How to maximize efficiency by utilizing a single function to handle multiple properties in Angular