Published unlisted
Edited
Jun 16, 2021
Insert cell
Insert cell
tabs = html
`

<div id="mainTabs" class="filter">
<ul>
<li class="toggle red active"><a href="#red">Red</a></li>
<li class="toggle green"><a href="#green">Green</a></li>
<li class="toggle blue"><a href="#blue">Blue</a></li>
</ul>
</div>

<!-------------------- Tab Panes ------------>

<div id="subTabs">
<div id="red" class="subFilter active">
<ul>
<li class="">Red1</li>
<li class="">Red2</li>
<li class="">Red3</li>
</ul>
</div>

<div id="green" class="subFilter hidden">
<ul>
<li class="">Green1</li>
<li class="">Green2</li>
<li class="">Green3</li>
</ul>
</div>

<div id="blue" class="subFilter hidden">
<ul>
<li class="">Blue1</li>
<li class="">Blue2</li>
<li class="">Blue3</li>
</ul>
</div>
</div>
`
Insert cell
function onTabClick(event) {
let activeTab = tabs.querySelectorAll('.active');
// Deactivate existing active tab and panel
activeTab.forEach(function(tab) {
tab.className = tab.className.replace('active', '');
});
// Activate new active tab and panel
event.target.parentElement.className += ' active';

tabs.querySelector('#' + event.target.href.split('#')[1]).className += ' active';
};
Insert cell
mainTabs = {
const element = tabs.querySelector('#mainTabs'); // looking for 'mainTabs'
element.addEventListener('click', onTabClick, false);
return element;
}
Insert cell
html`

<style>

.filter ul { list-style: none; }

.toggle { display: inline-block; margin: 0; padding: 4px 12px 8px 12px; width: auto; }
.toggle a { color: white; text-decoration: underline; }
.toggle.red { background-color: red; }
.toggle.green { background-color: green; }
.toggle.blue { background-color: blue; }

.subFilter { display: none; }
.subFilter.active { display: block; }

</style>
`
Insert cell
Insert cell
x = 5
Insert cell
y = x * 2
Insert cell
myDiv = html`<div id="myId">Hello!</div>`
Insert cell
myDiv === document.getElementById('myId')
Insert cell
myDiv.id
Insert cell
myDiv.innerHTML
Insert cell
myDiv.outerHTML
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more