Browser Plugin Tabs – how to show one and hide the other?

I have a prototype browser plugin which opens a popup window, I want to display the main page but have the option to switch to another tab to alter preferences. Currently I can only get it to display the forms for both tabs or display nothing, depending on where I put the ‘display:none’ part. Here is my code, which currently shows all the options and clicking tab buttons does nothing, any help appreciated.

<header class="panel-section panel-section-header">
    <div class="icon-section-header"><!-- An image goes here. --></div>
    <div class="text-section-header">Privacy Tool Header</div>
</header>

<div class="panel-section panel-section-tabs">
    <button class="panel-section-tabs-button selected" onclick="showHide(Home)">Home</button>
    <button class="panel-section-tabs-button" onclick="showHide('Preferences')">Preferences</button>
</div>

<div id="Home" class="tabcontent">
    <div class="panel-section panel-section-formElements">
        <div class="panel-formElements-item">
            <label for="content">What would you like to post?</label>
            <select id="content">
                <option value="default" selected="true"></option>
                <option value="text">Text</option>
                <option value="image">Image</option>
            </select>
        </div>
        <div class="panel-formElements-item">
            <label for="network">Where would you like to post it?</label>
            <select id="network">
                <option value="default" selected="true"></option>
                <option value="facebook">Facebook</option>
                <option value="twitter">Twitter</option>
            </select>
        </div>
    </div>
</div>

<div id="Preferences" class="tabcontent">
    <div class="panel-section panel-section-formElements">
        <div class="panel-formElements-item">
            <label for="location">Share your location?</label>
            <select id="location">
                <option value="default" selected="true"></option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
        <div class="panel-formElements-item">
            <label for="self">Share photos of yourself?</label>
            <select id="self">
                <option value="default" selected="true"></option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>

    <script src="options.js"></script>
</div>

<script type="text/javascript">
function showHide(tab) {
    var tabs = document.getElementsByClassName('tabcontent')
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].style.display = 'none';
    }

    document.getElementById(tab.id.replace(/(d)/g, '-1$')).style.display = 'block';
}
</script>

<footer class="panel-section panel-section-footer">
    <button class="panel-section-footer-button">Cancel</button>
    <div class="panel-section-footer-separator"></div>
    <button class="panel-section-footer-button default">Go</button>
</footer>
</body>

Source: Ask Javascript Questions

LEAVE A COMMENT