How can I add 3 tabs to my web page?

For my MarketPress/GridMarket network of shops, I am building a new-site template that includes a custom "shop page-template". (Will use "new blog templates" when done.)

In the page-template.php I added tab css (let me know if you need to see this) and the javascript below.

<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById('li_tab3').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>

a) As site admin, I can go into the page editor and add tab content to only tab1 visually. I have to use the text editor to edit tab2 and 3, which makes it hard to update.

b) I need help to change the tab itself when active, turning background white for "visited or active" tab. This is what I tried:

#tabs ul li a:visited {
color: #028aab;
padding-bottom: 2px;
background: white;
}

c) I need to be able to add scrolling ability for longer content, or better yet, just allow the page to expand to accommodate the text. Right now my paragraphs get cut off.

Thank you!