Garmaine Staff asked 3 months ago

I want to code a path navigation with jQuery.

This is how it looks at the moment:

$("#one_link").click(function() {
$("#categories").css("display", "block");
$("#text_three").css("display", "none");
$("#cats_text").css("display", "none");
$("#text_two").css("display", "none");
});

$("#cats_link").click(function() {
$("#cats_text").css("display", "block");
$("#text_two").css("display", "none");
$("#text_three").css("display", "none");
});

$("#two_link").click(function() {
$("#text_two").css("display", "block");
$("#categories").css("display", "none");
$("#cats_text").css("display", "none");
$("#text_three").css("display", "none");
});

$("#three_link").click(function() {
$("#text_three").css("display", "block");
$("#categories").css("display", "none");
$("#cats_text").css("display", "none");
$("#text_two").css("display", "none");
});
* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
}

html, body {
width: 100vw;
height: 100vh;
overflow: hidden;
}

.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}

.column {
border-right: 1px solid;
}

.column_content {
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 20px;
}

.column {
display: none;
}

.column:first-child {
display: block;
}

li:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">

<div class="column">
<div class="column_content">
<ul>
<li id="one_link">One</li>
<li id="two_link">Two</li>
<li id="three_link">Three</li>
</ul>
</div>
</div>

<div id="categories" class="column">
<div class="column_content">
<ul>
<li id="cats_link">Cats</li>
</ul>
</div>
</div>

<div class="column" id="cats_text">
<div class="column_content">
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
</div>
</div>

<div class="column" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
</div>
</div>

<div class="column" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>

</div>

What I need is a toggle function for the links. For example, if you click one link a second time, the content should be hidden. Taking ».toggle« instead of ».click« doesn't work. And in general: Is there an easier way to code this? Or do I have to link it so detailed together as I did?

Would be very grateful for any help! <3