Switching between div elements using Javascript

Question

My website has 3 services, I want to be able to click on service 1 and see menu 1, click on service 2 and see menu 2, click on service 3 and see menu 3. I have the following code but it is not working as expected. When I click on service 2 and service 3, nothing shows up.

HTML :

<div class="row" id="menu_service1">
    <div class="col-md-4">
        <span><h5>Choose a line</h5> <select id="lines" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service2">
    <div class="col-md-4">
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service3">
    <div class="col-md-4">
        <p>blah</p>
    </div>
</div>

JS :

$(document).ready(function() { 
    var line_array = ["Line 1", "Line 2", "Line 3"];
    var stops = ["stop1", "stop2", "stop3"] ;

    for (var i = 0; i < line_array.length; i++) {
        $('#lines').append('<option>' + line_array[i] + '</option>');
    }

    for (var i = 0; i < stops.length; i++) {
        $('#stop').append('<option>' + stops[i] + '</option>');
    }

    $('#menu_service1').hide();
    $('#menu_service2').hide();
    $('#menu_service3').hide();

    $('#Service_1').click(function() {
        $('#menu_service1').toggle();
    });

    $('#Service_2').click(function() { 
        $('#menu_service2').toggle();
    });

    $('#Service_3').click(function() { 
        $('#menu_service3').toggle();
    });
});

and where are the #Service_1 #Service2 and #Service3 elements — The Process
– The Process, Commented Feb 19, 2016 at 17:47

Zakaria Acharki · Accepted Answer · 2016-02-19 17:56:42Z

Working Fiddle.

id should be unique in same document, so try to replace the duplicated ones by general classes, e.g:

<span><h5>Choose a line</h5> <select class="form-control lines"></select></span> 
<span><h5>Choose a stop</h5> <select class="form-control stop"></select></span>

And in your JS use them with class selector dot ., like :

$('.lines').append('<option>' + line_array[i] + '</option>');

You should also fix the typos in the following two lines by adding id selector sogn # :

$('menu_service2').toggle();
$('menu_service2').toggle();

Should be :

$('#menu_service2').toggle();
$('#menu_service2').toggle();

Also you could use comma , separator for multiple selectors, so instead of :

$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();

Use just :

$('#menu_service1,#menu_service2,#menu_service3').hide();

Hope this helps.

$(document).ready(function() { 
  var line_array = ["Line 1", "Line 2", "Line 3"];
  var stops = ["stop1", "stop2", "stop3"] ;

  for (var i = 0; i < line_array.length; i++) {
    $('.lines').append('<option>' + line_array[i] + '</option>');
  }

  for (var i = 0; i < stops.length; i++) {
    $('.stop').append('<option>' + stops[i] + '</option>');
  }

  $('#menu_service1,#menu_service2,#menu_service3').hide();

  $('#Service_1').click(function() {
     $('.row').hide();
     $('#menu_service1').toggle();
  });

  $('#Service_2').click(function() { 
     $('.row').hide();
     $('#menu_service2').toggle();
  });

  $('#Service_3').click(function() { 
     $('.row').hide();
     $('#menu_service3').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id='Service_1'>Service 1</button>
<button id='Service_2'>Service 2</button>
<button id='Service_3'>Service 3</button>

<div class="row" id="menu_service1">
  <div class="col-md-4">
    <span><h5>Choose a line1</h5> <select class="form-control lines"></select></span> 
    <span><h5>Choose a stop1</h5> <select class="form-control stop"></select></span>
  </div>
</div>

<div class="row" id="menu_service2">
  <div class="col-md-4">
    <span><h5>Choose a line2</h5> <select class="form-control lines"></select></span> 
    <span><h5>Choose a stop2</h5> <select class="form-control stop"></select></span>
  </div>
</div>

<div class="row" id="menu_service3">
  <div class="col-md-4">
    <p>blah</p>
  </div>
</div>

Thank you, in your Fiddle, if I click on Service 1 and then Service 2, the two menus just add to each other. Any way I can fix that? Only display one menu at a time?

Seth Flowers · Accepted Answer · 2016-02-19 17:47:52Z

1

You forgot the # sign in front of the id's in your selectors.

$('#menu_service2').toggle();
$('#menu_service3').toggle();

answered Feb 19, 2016 at 17:47

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Comments

gaetanoM · Accepted Answer · 2016-02-19 18:01:19Z

I prefer to write less lines of code to obtain the same result.

$(function () {
  var line_array = ["Line 1", "Line 2", "Line 3"];
  var stops = ["stop1", "stop2", "stop3"] ;

  for (var i = 0; i < line_array.length; i++) {
    $('[id^=lines]').append('<option>' + line_array[i] + '</option>');
  }

  for (var i = 0; i < stops.length; i++) {
    $('[id^=stop]').append('<option>' + stops[i] + '</option>');
  }

  $('[id^=menu_service]').hide();

  $('[id^=Service_]').click(function() {
    var currDiv = this.getAttribute('data-div');
    $('div.row:not(#' + currDiv + ')').hide();
    $('#' + currDiv).toggle();
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id='Service_1' data-div="menu_service1">Service 1</button>
<button id='Service_2' data-div="menu_service2">Service 2</button>
<button id='Service_3' data-div="menu_service3">Service 3</button>
<div class="row" id="menu_service1">
    <div class="col-md-4">
        <span><h5>Choose a line</h5> <select id="lines1" class="form-control"></select></span>
        <span><h5>Choose a stop</h5> <select id="stop1" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service2">
    <div class="col-md-4">
        <span><h5>Choose a stop</h5> <select id="stop2" class="form-control"></select></span>
        <span><h5>Choose a stop</h5> <select id="stop2" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service3">
    <div class="col-md-4">
        <p>blah</p>
    </div>
</div>

Collectives™ on Stack Overflow

Switching between div elements using Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related