How to use buttons to show/hide containers

Question

I'm fairly new to HTML,CSS and Javascript and I'm trying to build a site with, ironically, 'How To' guides and instructions and business processes.

The idea is that I have a container on the side that acts as a 'menu' with buttons in it to select the guide they want.

Once the button is clicked, the container on the right changes. These containers on the right will be the space where the training material is placed, but for now, i have given all the containers a different colour so I can tell when it has changed. I'd like the button functions to work before I start adding everything to the containers. I'm struggling to get the code to work though, so the containers actually change! I've created a J-Fiddle that hopefully will show what I have tried so far..

To be honest I did also 'borrow' some code regarding getting the other containers to .hide when a button is clicked, but it doesn't work for me. If anyone has a more efficient way to hide the other containers (eg Containers 1,2 and 3 are hidden when container button 4 is selected), then go for it! Any help is really appreciated.

   <div class="centrepositioning">

            <div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>



    <div id="centrePanel"></div>
    <div id="centrePanel2"></div>
    <div id="centrePanel3"></div>
    <div id="centrePanel4"></div>



<script type="text/javascript">
 </script>

<script>
$(function() {
    $('#showpanel1').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel1').show();
    });
    $('#showpanel2').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel2').show();
    });

    $('#showpanel3').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel3').show();
    });

    $('#showpanel4').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel4').show();
    });

})</script>

.centrepositioning
{
    border:thin blue solid;
    margin:auto;
    padding:10px;
    width:1337px;
    }
.howToLeftList
    {
    width:250px;
    height:300px;
    background-color:#004FB6;
    padding:10px;
    color:white;
    float:left;
    margin:5px;
}
#centrePanel
{
    width:1000px;
    background-color:white;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;

}
#centrePanel2
{
    width:1000px;
    background-color:red;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

}
#centrePanel3
{
    width:1000px;
    background-color:blue;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

}
#centrePanel4
{
    width:1000px;
    background-color:yellow;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

JSFiddle

Answer 1

Ok some notes first:

1) In the fiddle you should put your javascript on the bottom left window, the top left window is for html only, minor, just throwing it as hint.

2) Your fiddle does not have jquery loaded, you can manage external resources on the left menu, right now your $ is undefined in the fiddle

And on to your problem, this selector is wrong

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

this selector is the right one

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

Your original selector is targeting any div with an id of "div" something, where you name them differently. Try it and let me know

Answer 2

Here is a working code. In case you need to reference it.

 $(function() { $('#showpanel1').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel1').show(); }); $('#showpanel2').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel2').show(); }); $('#showpanel3').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel3').show(); }); $('#showpanel4').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel4').show(); }); }) 

 .centrepositioning { border:thin blue solid; margin:auto; padding:10px; } .howToLeftList { width:250px; height:300px; background-color:#004FB6; padding:10px; color:white; float:left; margin:5px; } #centrePanel1 { width:1000px; background-color:white; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; } #centrePanel2 { width:1000px; background-color:red; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } #centrePanel3 { width:1000px; background-color:blue; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } #centrePanel4 { width:1000px; background-color:yellow; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="centrepositioning"> <div class="howToLeftList"> <button id="showpanel1">Centre White Panel</button> <button id="showpanel2">Centre Red Panel</button> <button id="showpanel3">Centre Blue Panel</button> <button id="showpanel4">Centre Yellow Panel</button> </div> <div id="centrePanel1">white</div> <div id="centrePanel2">red</div> <div id="centrePanel3">blue</div> <div id="centrePanel4">yellow</div>