var list = document.querySelectorAll("#principles-list > div");
var dropdown = document.getElementById("principles-dropdown");
var content = document.querySelectorAll("#principles-content > div");
var i;

function change_content(id) {
	for (i = 0; i < content.length; i++) {
		if (content[i].id == id)
			content[i].classList.add("visible");
		else
			content[i].classList.remove("visible");
	}
}

for (i = 0; i < list.length; i++) {
	list[i].addEventListener("click", function() {
		for (i = 0; i < list.length; i++) {
			list[i].classList.remove("active");
		}
		this.classList.add("active");
		change_content(this.getAttribute("data-value"));
	});
}

dropdown.addEventListener("change", function() {
	change_content(this.value);
});