使div容器显示隐藏，然后使用按钮显示

Question

I am creating an admin panel and I have a panel on the left side of my page that I want to bring up different data.

I created a JSFiddle to show what I am doing.

The issue I am having is I want the dashboard home message...

<div id="dashboard_home">Welcome to the Admin Dashboard</div>

To be the only div that shows up on page load. Then when a panel seletion is clicked on, for the dashboard home message to go away and then only that new panel selection's div to show up.

Then once another panel selection is clicked on, I want the previous selection to hide and the new one to display and so fourth for all of the selections.

What do I need to do?

HTML

<div class="panel_out">
    <div class="panel">
        <input type='button' class="panel_buttons" id='user_request_button' value='User Requests'>
        <input type='button' class="panel_buttons" id='message_button' value='Message Center'>
        <input type='button' class="panel_buttons" id='draft_order_button' value='Draft Order'>
        <input type='button' class="panel_buttons" id='draft_input_button' value='Draft Input'>
        <input type='button' class="panel_buttons" id='announcements_button' value='Announcements'>
        <input type='button' class="panel_buttons" id='dues_button' value='League Dues'>
    </div>
</div>
<div class="dashboard_selection">
    <div id='user_requests'>User Requests</div>
    <div id='message_center'>Message Center</div>
    <div id='draft_order'>Draft Order</div>
    <div id='draft_input'>Draft Input</div>
    <div id='announcements'>Announcements</div>
    <div id='dues'>Leauge Dues</div>
</div>

JS

jQuery(document).ready(function () {
    jQuery('#user_request_button').on('click', function (event) {
        jQuery('#user_requests').toggle('hide');
    });
    jQuery('#message_button').on('click', function (event) {
        jQuery('#message_center').toggle('hide');
    });
    jQuery('#draft_order_button').on('click', function (event) {
        jQuery('#draft_order').toggle('hide');
    });
    jQuery('#draft_input_button').on('click', function (event) {
        jQuery('#draft_input').toggle('show');
    });
    jQuery('#announcements_button').on('click', function (event) {
        jQuery('#announcements').toggle('show');
    });
    jQuery('#dues_button').on('click', function (event) {
        jQuery('#dues').toggle('show');
    });
});

Answer 1

Demo

You're adding far too many bespoke events when you don't need to. Normalise your IDs to match the button IDs and derive one from the other,

eg <input id='user_requests_button' /> finds <div id="user_requests">

Show the div you want, then use siblings() to get the elements that you want hidden, and hide them.

Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).

jQuery(document).ready(function () {
    $('.panel_out input').on('click', function(){
        // derive the ID
        var id_to_show = '#' + this.id.replace('_button', '');
        // show one and hide the others
        $(id_to_show).show().siblings().hide();
    }).first().trigger('click'); // trigger the first on page load
});

Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).

Answer 2

On a click hide all panels first. And then open the desired one with .show()

So i would do it this way:

$('.panel').click(function(e){
 $('.panel').hide();
 $(e.currentTarget).closest('panel').show();
});