**Need help to fix Javascript Accordion minimize and maximize issue**
---------------------------------------------------------------------

Steps to reproduce:
-------------------

* ### A. Happy path works fine:

	1. Click + for Accordion.
	2. Click Yes radio and the div expands showing buttons.
* ### B. Different path fails (need help to fix this part)

	1. Click + for Accordion.
	2. Click No radio and the div expands not showing buttons (works).
	3. Click - now for Accordion.
	4. Click + again for Accordion.
	5. Click Yes radio now and this fails to expand full (\*\*fix/help needed here).

[Problematic JSFiddle](https://jsfiddle.net/pvchaitanya/tjb7tcqk/9/)
--------------------------------------------------------------------

```
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #b2b2b2;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

h1 {
  padding: 20px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}
</style>
<script>
$(document).on("click",'[name=jenkinsgroup1]',function(e){
  $('.toHide').hide();
  $("#jenkinsgroup-"+$(this).val()).show('slow');
  $("#jenkinsgroup").css('background','#e5e5e5');
});
</script>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <div class='col' id='jenkinsgroup'>
              <br>&emsp;Jenkins Integration?              
                <input type="radio" name="jenkinsgroup1" value="1">
        Yes       
                <input type="radio" name="jenkinsgroup1" value="2">
                No            
              <div id="jenkinsgroup-1" class="toHide" style="display:none color:black">   
                      <br>&emsp;ServerUrl&nbsp;&nbsp;                   
                            <input id="server" type="text" placeholder="Text input">        
                      <br><br>&emsp;JobName&nbsp;&nbsp;
                            <input id="jobname" type="text" placeholder="Text input" style="margin-bottom:10px">

        </div>
              <div id="jenkinsgroup-2" class="toHide" style="display:none color:black">             
              </div>              
          </div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
                  panel.style.maxHeight = null;
            var ele = document.getElementsByName("jenkinsgroup1");
             for(var i=0;i<ele.length;i++)
                ele[i].checked = false;
                    $("#jenkinsgroup").css('background','#ffffff');
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
            $('.toHide').hide();
        }
    });
}
</script>

</body>
</html>

```