Security Simplified

Manipulating CSS Class Properties Using JavaScript

Example #1

This example shows the different application panels in my personal project. The menu items when clicked will change the CSS style for each application panel so that it displays the selected panel. You can see this in action on my personal project

HTML

<div id="garage">
    <h2>Garage</h2>
        ...
</div>
<div id="record">
    <h2>Record</h2>
        ...
</div>
<div id="journal">
    <h2>Journal</h2>
        ...
</div>
<div id="nextMaintenance">
    <h2>Next Maintenance</h2>
        ...
</div>

CSS

#garage {
    display: inline;
}

#record {
    display: none;
}

#journal {
    display: none;
}

#nextMaintenance {
    display: none;
}

Javascript

function garageLinksFunction() {
    showLeftFunction();
    garage.style.display = "inline";
    record.style.display = "none";
    journal.style.display = "none";
    nextMaintenance.style.display = "none";
};

function recordLinksFunction() {
    showLeftFunction();
    garage.style.display = "none";
    record.style.display = "inline";
    journal.style.display = "none";
    nextMaintenance.style.display = "none";
};

function journalLinksFunction() {
    showLeftFunction();
    garage.style.display = "none";
    record.style.display = "none";
    journal.style.display = "inline";
    nextMaintenance.style.display = "none";
};

function nextMaintenanceLinksFunction() {
    showLeftFunction();
    garage.style.display = "none";
    record.style.display = "none";
    journal.style.display = "none";
    nextMaintenance.style.display = "inline";
};