CODEWITHSUNDEEP
javascripthtmlcss
Anton Pozharitskiy
Anton Pozharitskiy

Reputation: 47

How to change the current of panel except first one?

I make a site and have a panel's. Part of my site:
Part of my site

<div class="block">
    <div class="block-title">
        <h1>Open/close div tag's</h1>
        <h2>Some junior's magic</h2>
    </div>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" onclick="openbox('panel1'); return false">Donec quis dui at dolor tempor<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel1" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" onclick="openbox('panel2'); return false">Vivamus molestie gravida turpis<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel2" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseThree" onclick="openbox('panel3'); return false">Fusce lobortis lorem at ipsum semper<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel3" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseFour" onclick="openbox('panel4'); return false">Nam convallis pellentesque nisl<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel4" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
    </div>
</div>

I'm writing a JavaScript-script, which open one of this panel at time and change '+' sign to '-'.

Here is my JavaScript-code.

function openbox(id){ 
  var element = document.getElementById(id);
  display = element.style.display;

  if(display=='none'){ 
      element.style.display='block';
      ver elem = document.getElementById('panel1');
      document.getElementsById('open-icon').innerHTML = '-';
  }
  else{
      document.getElementById(id).style.display='none'; 
      document.getElementById('open-icon').innerHTML = '+';
  }
}

When I clicked on the first panel, it's working correctly. But if I clicked on the other one, div opened, but '+' sign changed at first panel. Example:
Example

And the last trouble: I want to open only one panel at time and auto-close other panels (and if I open 2 panels and close only one, '-' sign changed to '+' on the first panel). But I can't understand how to do it. Here the issue:
Here the issue

Upvotes: 2

Views: 70

Answers (1)

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

You need to use this, like open(this, 'panel1') find the children of click anchor and change the innerHTML

function openbox(e, id) {
  var element = document.getElementById(id),
    display = element.style.display;
  var activePanel = document.querySelector('.active-panel'),
    activeToggle = document.querySelector('.active-toggle');
  if(activePanel) {
    activePanel.style.display = 'none';
    activePanel.classList.remove('active-panel');
    activeToggle.classList.remove('active-toggle');
    activeToggle.children[0].innerHTML = '+';
  }
  if(display == 'none') { 
    element.style.display = 'block';
    element.classList.toggle('active-panel');    
    e.children[0].innerHTML = '-';
    e.classList.toggle('active-toggle');
  } else {
    element.style.display = 'none';
    element.classList.toggle('active-panel');
    e.children[0].innerHTML = '+';
    e.classList.toggle('active-toggle');
  }
}
.accordion-toggle {
 background: #000;
 padding: 10px;
 display: block;
 color: #fff;
 text-decoration: none;
 position: relative;
}
.accordion-toggle span {
 background: #1f91dc;
 position: absolute;
 top: 0;
 right: 0;
 padding: 10px 15px;
}
<div class="block">
    <div class="block-title">
        <h1>Open/close div tag's</h1>
        <h2>Some junior's magic</h2>
    </div>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" onclick="openbox(this, 'panel1'); return false">Donec quis dui at dolor tempor<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel1" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" onclick="openbox(this, 'panel2'); return false">Vivamus molestie gravida turpis<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel2" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseThree" onclick="openbox(this, 'panel3'); return false">Fusce lobortis lorem at ipsum semper<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel3" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseFour" onclick="openbox(this, 'panel4'); return false">Nam convallis pellentesque nisl<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel4" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
    </div>
</div>

Upvotes: 2

Related Questions