主DIV上的JavaScript和jQuery切换不起作用

Question

So, I'm making it where their is some buttons, and when one is clicked it makes the hidden DIV with contents unhide, this is what I have:

<div id="disArea">   <!--The toggled Dac diplays in this area.-->
            <div class="Dac  1">
                <p>Dac 1/p>
            </div>

            <div class="Dac  2">
                <p>Dac 2/p>
            </div>

            <div class="Dac  3">
                <p>Dac 3/p>
            </div>

            <div class="Dac  4">
                <p>Dac 4/p>
            </div>

            <div class="Dac  5">
                <p>Dac 5/p>
            </div>
    </div>

            <div class="ibox" onclick="disToggle('.1')">Button 1 (Displays the Dac 1)</div>
            <div class="ibox" onclick="disToggle('.2')">Button 2 (Displays the Dac 2)</div>
            <div class="ibox" onclick="disToggle('.3')">Button 3 (Displays the Dac 3)</div>
            <div class="ibox" onclick="disToggle('.4')">Button 4 (Displays the Dac 4)</div>
            <div class="ibox" onclick="disToggle('.5')">Button 5 (Displays the Dac 5)</div>

Please remember that the div's with the class of "Dac" are hidden until jQuery executes the following (well, that is what I want to do, but it doesn't):

function disToggle(DacNumClass)
{
  $("ibox").click(function()
  {
    $(DacNumClass).toggle();
  });
}

I've done this by using a JavaScript function with a argument, the argument calls out the Id, or class that I need to .toggle() . This could be the complete wrong idea, correct me if I am wrong. How this works is ever Dac has a number class along with it, and the function argument is the class eg divToggle()

And I have lastly my CSS, not sure if this important at all, but here it is:

#disArea {
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background: green;
}

        .Dac {
        display: none;
        }

.ibox {
background: red;
display: block;
width: 125px;
height: 125px;
margin: 5px;
}

It doesn't seem to be toggling? what have I done wrong?

jsFiddle Example

*Fixed link with the /p> instead of </p>

Also, is it possible to have only one Dac Div open at a time?

Answer 1

Since disToggle itself is a click handler you should just toggle the target element inside the method.

Also since the method disToggle is used as a inlined handler it should be added to the global scope, by default jsfiddle will add the given script in window.onload=function(){...} wrapper which will make the disToggle method a private one to the onload handler. You need to select No Wrap - Body/Head in Left Side Panel -> Second Dropdown

function disToggle(DacNumClass) {
    $('.Dac').not(DacNumClass).hide()
    $(DacNumClass).toggle();
}

Demo: Fiddle

A more jQuery-ish solution

<div class="ibox" data-target=".1">Button 1 (Displays the Dac 1)</div>
<div class="ibox" data-target=".2">Button 2 (Displays the Dac 2)</div>
<div class="ibox" data-target=".3">Button 3 (Displays the Dac 3)</div>
<div class="ibox" data-target=".4">Button 4 (Displays the Dac 4)</div>
<div class="ibox" data-target=".5">Button 5 (Displays the Dac 5)</div>

then

jQuery(function ($) {
    var $dacs = $('.Dac');
    $('.ibox').click(function () {
        var target = $(this).data('target');
        $dacs.not(target).hide();
        $(target).toggle();
    })
})

Demo: Fiddle