Show table when its tab is clicked but hide other tables

Question

So right now I have a section that has 3 tabs on it. Each tab is supposed to bring up a different table while simultaneously hiding the other 2 tables. When the page loads up it shows the first table (which it is supposed to do), but when I click one of the other two tabs nothing happens. I realize this has to be done with a Javascript onclick but I'm not familiar with it yet to know what I'm doing. I unfortunately have a lot of code that goes into making this work so i wont be able to post it on here but ill grab the code i think is most important and if you need any more info let me know. Please and thankyou for your help.

The tabs are "Pavement Section Editor", "Traffic", and "Condition"

HTML:

  <div class='row' style="background-color: white; vertical-align:top; height: 250px;">
                <div class="fifthDiv">
                    <br />
                    <article style="float: left; width: 100%; margin-left: 25px; height:250px;">
                        <section class="tabSection" id="tabmain">
                            <h2 class="large" style="font-size: 12px;">
                                <a href="#tabMain">Pavement Section Grid</a>
                            </h2>
                            <p><div id="table_div_Main"></div></p>
                        </section>
                        @foreach (var layer in lstLayers)
                        {
                            if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
                            {
                                <section id="@("tab" + layer.Replace(" ", ""))" class="tabSection">
                                    <h2 class="medium" style="font-size: 12px;"><a href="@("#tab" + layer.Replace(" ", ""))">@layer</a></h2>
                                    <p><div id="@("table_div_" + layer.Replace(" ", ""))"></div></p>
                                </section>
                            }
                        }
                    </article>
                </div>
            </div>

JAVASCRIPT:

function drawSectionData(data) {
    return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};

function drawTrafficData(data) {
    return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};

function drawConditionData(data) {
    return drawMe(data, 'Condition Data', 'table_div_Condition');
};

//what i got so far on the javascript
 $(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })

Answer 1

The best way to implement tabs in your scenatio is to use jQuery Tabs - very easy and almost no additional coding required, and as added benfit it is free

Answer 2

Based on the assumption that:

• You want to hide only the content that sits within the p of each section and not hide the whole section itself because that would mean that your click-able h2 will also become invisible.
• You have removed div from within your section and are only using p because inline elements do not allow to contain a block (in your case, a div) element inside it. [Link], [Link] & [Link].

Your JavaScript code then may look like this:

var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
    tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
        tabSections.find('p').hide(); // hide all p elements found within tabSections
        $(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
    });

Snippet:

var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
    tabSections.find('p').hide();
    $(this).siblings('p').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
    <div class="fifthDiv">
        <br />
        <article style="float: left; width: 100%; margin-left: 25px; height:250px;">
            <section class="tabSection" id="tabmain">
                 <h2 class="large" style="font-size: 12px;">
                    <a href="#tabMain">Main</a>
                </h2>
                <p id="table_div_Main">Pavement Data</p>
            </section>
            <section class="tabSection" id="tabTraffic">
                 <h2 class="medium" style="font-size: 12px;">
                    <a href="#tabTraffic">Traffic</a>
                </h2>
                <p id="table_div_Traffic">Traffic Data</p>
            </section>
            <section class="tabSection" id="tabCondition">
                 <h2 class="medium" style="font-size: 12px;">
                    <a href="#tabCondition">Condition</a>
                </h2>
                <p id="table_div_Condition">Condition Data</p>
            </section>
        </article>
    </div>
</div>

Hope this helps.