Div Show/Hide within Tab Classes

Question

Trying to get dropdown to show/hide div if selected within two tab classes. Have managed to get this to work in first tab thanks to this solution

Here is the HTML:

<div class="tab2">

                <select id="target" style="width:150px; margin-left:40px; height:420px">
                    <option value="content_1">Option 1</option>
                    <option value="content_2">Option 2</option>
                </select>

                <div id="content_1" class="inv" style="width:252px; margin-left:-11px; height:300px">

                    <a class="scopeTextArea-1">Content 1</a>

                </div>
                <div id="content_2" class="inv" style="width:252px; margin-left:-11px; height:300px">
                    <a class="scopeTextArea-1">Content 2</a>
                </div>
            </div>
            <div class="tab3">
                <select id="target" style="width:150px; margin-left:40px; height:420px">
                    <option value="content2_1">Content 3</option>
                    <option value="content2_2">Content 4</option>
                </select>

                <div id="content2_1" class="inv" style="width:252px; margin-left:-11px; height:300px">
                    <a class="scopeTextArea-1">Content 3</a>

                </div>
                <div id="content2_2" class="inv" style="width:252px; margin-left:-11px; height:300px">
                    <a class="scopeTextArea-1">Content 4</a>
                </div>


            </div>

and here is the JQuery as per previous answer:

window.onload = function () {
document
    .getElementById('target')
    .addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),
            target = document.getElementById(this.value);
        if (vis !== null) {
            vis.className = 'inv';
        }
        if (target !== null) {
            target.className = 'vis';
        }
    });

// send change event to element to select the first div...
var event = new Event('change');
document.getElementById('target').dispatchEvent(event);

}

Any bright ideas... Sorry if this is straight forward (or not). I'm new to this business and working on a personal project.

Grateful for any help I can get.

Here are some screenshots: Tab 2 Tab 3

Your issue is, that you are using multiple elements with she same IDs. IDs must be unique in a HTML document. Change the ID for subsequent elements and apply the event listener to each of them. It should work. — beerwin, Jun 27 '16 at 08:34

DiniZx · Answer 1 · 2016-06-27T08:51:11.257

Have a look attached snippet.

$(function() {
    $( "#tabs" ).tabs();
  });

window.onload = function () {
document.getElementById('target').addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),
            target = document.getElementById(this.value);
  
    var e = document.getElementById("target");
    var selec = e.options[e.selectedIndex].text;
          if (vis !== null) {
            vis.className = 'inv';
        }
        if (target !== null) {
            target.className = 'vis';
        }
    });
  
  
document.getElementById('target1').addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),
            target = document.getElementById(this.value);
  
    var e = document.getElementById("target");
    var selec = e.options[e.selectedIndex].text;
  
        if (vis !== null) {
            vis.className = 'inv';
        }
        if (target !== null) {
            target.className = 'vis';
        }
    });


// send change event to element to select the first div.....
var event = new Event('change');
document.getElementById('target').dispatchEvent(event);
}

.inv
{
  display:none;
  }
.vis
{
   display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">


<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
    <li><a href="#tabs-3">tab3</a></li>
  </ul>
  <div id="tabs-1">
    <p>tab1</p>
  </div>
  <div id="tabs-2">
  <select id="target" style="width:150px; margin-left:40px; height:20px">
                    <option value="content_1">Option 1</option>
                    <option value="content_2">Option 2</option>
                </select>

                <div id="content_1" class="inv" style="width:252px; margin-left:-11px; height:300px">


             <a class="scopeTextArea-1">Content 1</a>

                </div>
                <div id="content_2" class="inv" style="width:252px; margin-left:-11px; height:300px">
                    <a class="scopeTextArea-1">Content 2</a>
                </div>
  </div>
  <div id="tabs-3">
<select id="target1"  style="width:150px; margin-left:40px; height:20px">
                    <option value="content2_1">Content 3</option>
                    <option value="content2_2">Content 4</option>
                </select>

                <div id="content2_1" class="inv" style="width:252px; margin-left:-11px; height:30px">
                    <a class="scopeTextArea-1">Content 3</a>

                </div>
                <div id="content2_2" class="inv" style="width:252px; margin-left:-11px; height:300px">
                    <a class="scopeTextArea-1">Content 4</a>
                </div>

  </div>
</div>

While this may solve the problem, it's best to explain what you've changed. That way the asker can learn from it, rather than just copy pasting the solution. — DBS, Jun 27 '16 at 08:54

score 0 · Answer 2 · answered Jun 27 '16 at 08:56

You can't use the same id ( target ) for several elements. Id should be always unique.

So, lets change id="target" to classes class="target", because it possible to have several elements with the same classes.

Then you need get all the elements with "target" class and listen for change for every element.

window.onload = function () {
  var targetElements = Array.prototype.slice.call(document
    .getElementsByClassName('target'));
  targetElements.forEach(function(target){
      target.addEventListener('change', function () {
          'use strict';
          var vis = document.querySelector('.vis'),
              target = document.getElementById(this.value);
          if (vis !== null) {
              vis.className = 'inv';
          }
          if (target !== null) {
              target.className = 'vis';
          }
      });
    });

// send change event to element to select the first div...
var event = new Event('change');
document.getElementsByClassName('target')[0].dispatchEvent(event);
};

There I use getElementsByClassName to get all the elements with class target, then Array.prototype.slice.call to convert this collection of elements into Array. And forEach to go trough all the elements and add eventListeners.

Div Show/Hide within Tab Classes

2 Answers2