0

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")); })
Mr. Bond
  • 113
  • 1
  • 4
  • 14

2 Answers2

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

Yuri
  • 2,820
  • 4
  • 28
  • 40
0

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.

Community
  • 1
  • 1
Tahir Ahmed
  • 5,687
  • 2
  • 17
  • 28
  • I dont whats wrong but when i have that script in, my page will never load. Also your idea of what im trying to do is close, but there are only 3 tabs not four, the main is the pavement section, and the main becomes hidden when the other tabs are selected. So the main is visible by default but if another tab is press then that becomes visible and the main or other one is hidden – Mr. Bond Jun 11 '15 at 13:01
  • @MarkB, that should be pretty easy to do then don't you think. Remove the unnecessary tab, include clicks on `#tabmain` as well and use another cdn-based link to jQuery library. I have applied all these updates in my code above. Try it out again. P.S. I am not really sure why ajax.googleapis.com link won't work for you but I have used cdnjs.cloudfare.com link now so I guess it should work now. – Tahir Ahmed Jun 11 '15 at 14:27
  • Thanks for the reply, but i believe there is an issue somewhere that i just can't find because even with the altered code nothing changes. Ive tried adding js, changing the layout and searched everywhere for something connected to it but it still only shows the main table and wont change to anything else. I wish i could some how show on here what is going on but the solution is HUGE. But thank you for your time and help anyways i appreciate it. – Mr. Bond Jun 11 '15 at 17:12
  • @MarkB, you cannot share the web address of this thing either? – Tahir Ahmed Jun 11 '15 at 17:15
  • So something different happened with your new code. When the page loads up the main table is visible but when the other tabs are clicked no table is visible at all, assuming its just the wrong name somewhere. So change is good ill have an update soon – Mr. Bond Jun 11 '15 at 17:22
  • atm its just being run off my local host – Mr. Bond Jun 11 '15 at 17:23
  • Right. I guess check the names yeah. I tried to follow the exact names but could've missed something. – Tahir Ahmed Jun 11 '15 at 17:28
  • well im assuming im looking in the wrong spot but i cant seem to find any name that leads anywhere else – Mr. Bond Jun 11 '15 at 17:33
  • sorry man! cannot help any further without looking at the rendered website. wish I could but way too difficult to debug. pretty sure its something small and silly (it always is usually) but I'd be shooting in the dark if I continued :) – Tahir Ahmed Jun 11 '15 at 17:38
  • Thanks a lot Tahir once I get it working ill let you know and accept :) – Mr. Bond Jun 11 '15 at 17:41
  • also the script that was added was just messing with the loading animation, i guess there is a custom loading animation on the page and while script is in the program it makes it continuously load even though the page is already loaded. – Mr. Bond Jun 11 '15 at 19:28
  • lol no, only way to make it stop is if you remove the script which will obviously make the tabs not work properly – Mr. Bond Jun 11 '15 at 19:33