Toggle text in JavaScript

Question

Is there a easier way to toggle 2 or more text visibility? When I've used a .toggle() method, the text jumps up and down, because they are toggled at the same time. With .fadeIn() and .fadeOut() it's working correctly, but the code is messy.

var triggerTitle = function() {
  var hasClassHide = $(".hero-title.1").hasClass("hide");

  if (hasClassHide) {
    $(".hero-title.1").removeClass("hide");
    $(".hero-title.1").fadeIn(1000);
    $(".hero-title.2").addClass("hide");
    $(".hero-title.2").fadeOut(1000);
    $(".hero-title.2").css("display", "none");
  } else {
    $(".hero-title.2").removeClass("hide");
    $(".hero-title.2").fadeIn(1000);
    $(".hero-title.1").addClass("hide");
    $(".hero-title.1").fadeOut(1000);
    $(".hero-title.1").css("display", "none");
  }
};

setInterval(triggerTitle, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="hero-title 1">WEB DEVELOPER</h1>
<h1 class="hero-title 2 hide" style="display: none;">WEB DESIGNER</h1>

If you put the code into a snippet, it can be tried out directly on this page :) — ByteHamster
– ByteHamster, Commented Apr 26, 2015 at 10:08
I don't understand what you want, but for fadeIn and fadeout you don't need set also css("display", "none"). — A.J.
– A.J., Commented Apr 26, 2015 at 10:12
try like this if (hasClassHide) { $(".hero-title.1").removeClass("hide"); $(".hero-title.2").fadeOut(1000); $(".hero-title.1").fadeIn(1000); $(".hero-title.2").addClass("hide"); } else { $(".hero-title.2").removeClass("hide"); $(".hero-title.1").fadeOut(1000); $(".hero-title.2").fadeIn(1000); $(".hero-title.1").addClass("hide"); } — A.J.
– A.J., Commented Apr 26, 2015 at 10:12
@A.J. this should be an answer. Working fine, just needs a bit of css styling. — ByteHamster
– ByteHamster, Commented Apr 26, 2015 at 10:14

Andrei CACIO · Accepted Answer · 2015-04-26 10:25:42Z

3

Try this approach:

$('h1').hide();

var titles = ['web developer', 'web designer'];
var index = -1;
var triggerTitle = function() {
  $('h1').fadeOut();
  setTimeout(function() {
    $('h1').text(titles[index].toUpperCase());
    $('h1').fadeIn();
  }, 1000);
  index = (index < titles.length - 1) ? index + 1 : 0;
  console.log(index);
};

setInterval(triggerTitle, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1></h1>

This way you store your messages into a single array and you can add as many titles as you want. And you only have a single <h1> tag in your HTML. The code becomes much more cleaner.

Hope this helps!

edited Apr 26, 2015 at 10:25

answered Apr 26, 2015 at 10:21

Andrei CACIO

2,12915 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Runtime Terror Over a year ago

Thank you Andrey, but now on page load the title is empty. Is there a way to fix that as well?

ByteHamster · Accepted Answer · 2015-04-26 10:20:13Z

Based on the comment of @A.J., I have added some CSS. Looks really nice now.

var triggerTitle = function() {
  var hasClassHide = $(".hero-title.1").hasClass("hide");

  if (hasClassHide) { 
    $(".hero-title.1").removeClass("hide"); 
    $(".hero-title.2").fadeOut(1000); 
    $(".hero-title.1").fadeIn(1000); 
    $(".hero-title.2").addClass("hide"); 
  } else { 
    $(".hero-title.2").removeClass("hide"); 
    $(".hero-title.1").fadeOut(1000); 
    $(".hero-title.2").fadeIn(1000); 
    $(".hero-title.1").addClass("hide"); }
};

setInterval(triggerTitle, 3000);

h1 {
    position: absolute;
    width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="hero-title 1">WEB DEVELOPER</h1>
<h1 class="hero-title 2 hide" style="display: none;">WEB DESIGNER</h1>

Collectives™ on Stack Overflow

Toggle text in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related