Showing different div content based on navigation link

Question

I am creating a contact page for a company who have many offices, so instead of having a new page for each office they want the content just to change based on the locations selected.

I got it working with a select box, but after looking around its difficult to style the select box and is not mobile friendly.

So instead I want to create a drop down nav menu and when a user clicks a menu item the div content will change (or hide the div and replace it with another). I have found the below code which works with just two links, but the client has over 40 offices so I think there must be a better way to handle this? I can get each link or li a unique id.

HTML:

<a href="#" id="link_1">Press me</a>
<a href="#" id="link_2">Press me</a>

<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>

Jquery:

$(document).ready(function(){
    // Hide div 2 by default
    $('#div_2').hide();

    $('#link_2').click(function() { 
        $('#div_1').hide();
        $('#div_2').show();
    });

    $('#link_1').click(function(){ 
        $('#div_2').hide();
        $('#div_1').show();
    }); 
});

Ok to change the question a bit but still requiring the same outcome:

I currently use a 'Select box' which works exactly how I want it to using the following:

JS:

<script type="text/javascript">
$(document).ready(function () {
$('.eurowrapper').hide();
$('#option1').show();
$('#selectMe').change(function () {
    $('.eurowrapper').hide();
    $('#'+$(this).val()).show();
})
});
</script>

HTML:

<div class="styled-select">
<select id="selectMe">
<option value="option1">Head Office</option>
<option value="option2">Belgravia</option>
<option value="option3">Brighton</option>
<option value="option4">Chelsea</option>
<option value="option5">Clapham</option>
<option value="option6">Glasgow</option>
<option value="option7">Holland Park</option>
<option value="option8">Hyde Park</option>
<option value="option9">Islington</option>
<option value="option10">Maidstone</option>
<option value="option11">Oxford</option>
<option value="option12">Reading</option>
<option value="option13">St John's Wood</option>
<option value="option14">Tower Bridge</option>
<option value="option15">Wapping</option>
<option value="option16">Cluttons Resorts</option>
</select>
</div>

And the Divs:

<div id="option1" class="eurowrapper" style="float: left;"> Content </div>

<div id="option2" class="eurowrapper" style="float: left;"> More Content </div>

The above works perfectly, on page load the 'head office' contact details are there, and that changes when another town is selected from the 'select' box.

I want to move away from the select box like I said before and use a drop down navigation, is there any way I can have the exact same functionality as the select box, JS fiddle:

http://jsfiddle.net/NY9bW/

Answer 1

This is a small edit to Alaa Badran's solution: Instead of hiding all divs and then 'show' the selected one, what we can do is: Set the initial CSS "display" property of all divs to "none". Like this:

CSS:
#location1toN {
    display : none;
}

Then, when the user selects a location from your drop-down or link, get the ID of the appropriate div like Badran has shown, then just change the CSS property via jQuery, of the particular div, like this:

jQuery:
$(id_of_correct_div).css("display","block") ;

It's basically the same thing but slightly more optimal solution.

Or an alternative solution: Since it's a contact page, the fields to be filled will basically be the same, but their contents would change, based on the location selected. So you can have only one div, with fields like "Address" "Contact Number" "Email Address" etc. Then , when the user selects a location from the list, you can send an AJAX request to the server, get the contact details from the server, and update the fields of the one div. Since it's AJAX, the page won't be refreshed. It might be server-heavy, but it definitely saves you creating 40 divs!

Answer 2

I have a solution for you:

change the A tag into:

<a href="#id_of_div" class="links" id="link_1">Press me</a>
<a href="#id_of_div2" class="links" id="link_2">Press me</a>

And the Divs should look like:

<div id="id_of_div" class="divs"> Content1 </div>
<div id="id_of_div2" class="divs"> Content2 </div>

The jQuery for that will be as following:

$('a.links').click(function (e){
   e.preventDefault();
   var div_id = $('a.links').index($(this))
   $('.divs').hide().eq(div_id).show();
});

Answer 3

You can use the index of the array you get by selecting them, it's not necessary to hardcode them as an id.

var contentDivs = $('.contentDiv');

$('.links').click(function(){
  var index = $(this).index();

  $('.contentDiv').hide();
  $(contentDivs[index]).show();

});

But this means that if you change the order it will not correspond with the same office, with 40 offices this will lead to errors.

So the less error prone solution is to give the offices either an data-attribute, class or id that will allow you to identify them. Like you did but I would name them corresponding to their office.

<a href="#" class="contentLink" data-office="melbourne" >Press me</a>
<a href="#" id="contentLink" data-office="sydney" >Press me</a>

<div id="content_melbourne" class="contentDiv"> Content1 </div>
<div id="content_sydney" class="contentDiv"> Content2 </div>

<script>
$(document).ready(function(){
     $('.contentLink').click(function(){
     var office = $(this).attr('data-office');

     $('.contentDiv').hide();
     $('#content_' + office).show();

   });
});
</script>