Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142100

Struggling to include a new button choice of "showall" with the list of monthly choice buttons that I currently have, is this possible?

$
0
0

I am using the following html code that makes use of the <button> tag along with a matching ID. To include a button for one month my html line looks like this:-

<button class="tablinks" onclick="openTabbedPage(event, 'January')">January</button>

February

and for this to work the target div would look like this:

<div id="January" class="tabcontent" border="1">

and to glue it together using javascript for the openTabbedPage(evt, Month) in the footer of my html file.

function openTabbedPage(evt, Month) {
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(Month).style.display = "block";
    evt.currentTarget.className += " active";
}

I currently have one button for each month in sequence, and so clicking on a button displays that month's details.

What I am trying to do with this approach is to include a new button option called "showall". When clicked the details for every month are shown in sequence on one page in place of the one month at a time approach that I currently have.

Is there anyway that this could be achieved?


Viewing all articles
Browse latest Browse all 142100

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>