CODEWITHSUNDEEP
javascriptjquery
Anna_B
Anna_B

Reputation: 900

jQuery: Text toggle should always show only one text

I coded a text toggle function with jQuery. In general, it works. But: Always one text should be displayed. At the beginning, it should be the first text. If you click the second link, then only the second text should be displayed, and so on.

How is it possible to code that?

$(".link").click(function() {
  $(this).toggleClass("active-link");
  var target = $($(this).data("target"));
  target.toggleClass("show");
})
* {
  margin: 0;
  padding: 0;
  font-size: 3vw;
}

.text {
  margin-top: 20px;
  display: none;
}

.show {
  display: block;
}

.active-link {
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="link show" data-target="#one">One</div>
<div class="link" data-target="#two">Two</div>
<div class="link" data-target="#three">Three</div>

<div class="text" id="one">This is One. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="text" id="two">This is Two. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="text" id="three">This is Three. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Would be very thankful for help! Have a good day! <3

Upvotes: 1

Views: 57

Answers (1)

caramba
caramba

Reputation: 22490

You almost had it! See the comments inside the code

$(".link").click(function() {
  $(this).toggleClass("active-link");
  
  $('.text').addClass("hide"); /* added this line */
  $(".link").removeClass('active-link'); /* added this line */
  $(this).addClass('active-link'); /* added this line */
  
  var target = $($(this).data("target"));
  target.removeClass("hide"); /* added this line */
  target.addClass("show");
});

(function(){ // added this function
  // this code will be run on page load and then never again
  $('#one.text').addClass("show"); 
})(); // this is called IIFE. You could also just add the above line $('#one.text').addClass("show"); at the end of your javascript, but this is the nice way of doing it.
* {
  margin: 0;
  padding: 0;
  font-size: 3vw;
}

.text {
  margin-top: 20px;
  display: none;
}

.show {
  display: block;
}

.active-link {
  text-decoration: underline;
}

/* added the next 2 rules */
.link {
  cursor: pointer;
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="link active-link" data-target="#one">One</div>
<div class="link" data-target="#two">Two</div>
<div class="link" data-target="#three">Three</div>

<div class="text" id="one">This is One. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="text" id="two">This is Two. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="text" id="three">This is Three. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Upvotes: 2

Related Questions