Question

I have created the following code to show and hide divs. This shows one div at a time and hides the others. This works on all browsers except Safari.

HTML

<div class="buttons">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">1</div>
<div id="div2" style="display:none;">2</div>
<div id="div3" style="display:none;">3</div>
<div id="div4" style="display:none;">4</div>

JQuery

$('#showdiv1').click( function () {
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click( function () {
    $('div[id^=div]').hide();
    $('#div2').show();
});
$('#showdiv3').click( function () {
    $('div[id^=div]').hide();
    $('#div3').show();
});
$('#showdiv4').click( function () {
    $('div[id^=div]').hide();
    $('#div4').show();
});​

I am an absolute beginner and thought that Jquery would be the most elegant solution to showing multiple divs and it is! Except for Safari!

Any help would be great-fully received!

Answer 1

I would assume the problem with Safari is because it does not raise a click event on a elements which have no href attribute.

Also, your code can be simplified. Try this instead:

<div class="buttons">
    <a class="button" id="showdiv1" href="#div1">Div 1</a>
    <a class="button" id="showdiv2" href="#div2">Div 2</a>
    <a class="button" id="showdiv3" href="#div3">Div 3</a>
    <a class="button" id="showdiv4" href="#div4">Div 4</a>
</div>
<div id="div1" class="child">1</div>
<div id="div2" class="child" style="display:none;">2</div>
<div id="div3" class="child" style="display:none;">3</div>
<div id="div4" class="child" style="display:none;">4</div>

jQuery

$(".button").click(function(e) {
    e.preventDefault();
    $(".child").hide();
    $($(this).attr("href")).show();
});

Notice the use of classes to group elements together so that you don’t have so much code repetition.