Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

Question

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT".

Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight should be updated to "DECREASE TEXT WEIGHT".

If the text in the div reads "DECREASE TEXT WEIGHT" and you click on it, the font weight of #post-content should then be set to font-weight: 300 and the content of #increase-text-weight should revert back to "INCREASE TEXT WEIGHT".

Is there a way to achieve this?

UPDATE:

I attempted using getElementById but was unsuccessful.

javascript jquery html css

Answer 1

Answer №1

As you embark on your learning journey, here is a concise method using two classes.

To begin, the id selector $('#test') retrieves the node element.

Next, attach a click event listener to the reference. The selector $(this) then refers to the selector used in the attached function, essentially making $(this) equivalent to $("#test").

Using jQuery's .toggleClass() method after the dot allows for adding or removing a class from the element. Additionally, passing a true or false parameter will either add or remove the specified class respectively.

Chaining these two toggleClass() functions will add the class if it's not present or remove it if it already exists.

$("#test").click(function(){ // can also be .on('click',function(){ ... })

    $(this).toggleClass("decreased")
    .toggleClass("increased");

});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

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

<div id="test" class="decreased">Increase my font weight!</div>

Answer 2

As you embark on your learning journey, here is a concise method using two classes.

To begin, the id selector $('#test') retrieves the node element.

Next, attach a click event listener to the reference. The selector $(this) then refers to the selector used in the attached function, essentially making $(this) equivalent to $("#test").

Using jQuery's .toggleClass() method after the dot allows for adding or removing a class from the element. Additionally, passing a true or false parameter will either add or remove the specified class respectively.

Chaining these two toggleClass() functions will add the class if it's not present or remove it if it already exists.

$("#test").click(function(){ // can also be .on('click',function(){ ... })

    $(this).toggleClass("decreased")
    .toggleClass("increased");

});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

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

<div id="test" class="decreased">Increase my font weight!</div>

Answer 3

Answer №2

If you want a quick solution for this, consider using an if and else statement.

$('#increase-text-weight').on('click', function() {
    if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
    $(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
  $(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

div {
  width: 100%;
  height: 100px;
  text-align: center;
  border: 1px solid;
  margin: 0 0 25px 0;
  cursor: pointer;
}

.highlight {
  font-weight: 900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='increase-text-weight'>INCREASE TEXT WEIGHT</div>
<div id='post-content'>Text text and text</div>

Answer 4

If you want a quick solution for this, consider using an if and else statement.

$('#increase-text-weight').on('click', function() {
    if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
    $(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
    $('#post-content').addClass('highlight');
    $(this).text('DECREASE TEXT WEIGHT');
  } else {
  $(this).text('INCREASE TEXT WEIGHT');
    $('#post-content').removeClass('highlight'); 
  }
});

div {
  width: 100%;
  height: 100px;
  text-align: center;
  border: 1px solid;
  margin: 0 0 25px 0;
  cursor: pointer;
}

.highlight {
  font-weight: 900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='increase-text-weight'>INCREASE TEXT WEIGHT</div>
<div id='post-content'>Text text and text</div>

Answer 5

Answer №3

To change the appearance of a div element when clicked, you can use an onClick event. Every time the div is clicked, it checks its associated class and makes modifications accordingly. For instance, updating the text content within the div using `.text()`, and toggling between classes like this:

var myDiv = $("#test");

myDiv.click(function() {
  if (myDiv.hasClass("decreased")) {
    myDiv.removeClass("decreased")
      .addClass("increased")
      .text("Decrease my font weight!")
  } else {
    myDiv.removeClass("increased")
      .addClass("decreased")
      .text("Increase my font weight!")
  }
});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

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

<div id="test" class="decreased">Increase my font weight!</div>

Alternatively, you can achieve this using pure JavaScript in the following way:

var myDiv = document.getElementById("test");

myDiv.addEventListener("click", function() {
  if (myDiv.className === "decreased") {
    myDiv.classList.remove("decreased");
    myDiv.className = "increased";
    myDiv.textContent = "Decrease my font weight!";
  } else {
    myDiv.classList.remove("increased");
    myDiv.className = "decreased";
    myDiv.textContent = "Increase my font weight!";
  }
});

Answer 6

To change the appearance of a div element when clicked, you can use an onClick event. Every time the div is clicked, it checks its associated class and makes modifications accordingly. For instance, updating the text content within the div using `.text()`, and toggling between classes like this:

var myDiv = $("#test");

myDiv.click(function() {
  if (myDiv.hasClass("decreased")) {
    myDiv.removeClass("decreased")
      .addClass("increased")
      .text("Decrease my font weight!")
  } else {
    myDiv.removeClass("increased")
      .addClass("decreased")
      .text("Increase my font weight!")
  }
});

.decreased {
  font-weight: 100;
  color: red;
  cursor: pointer;
}

.increased {
  font-weight: 300;
  color: green;
  cursor: pointer;
}

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

<div id="test" class="decreased">Increase my font weight!</div>

Alternatively, you can achieve this using pure JavaScript in the following way:

var myDiv = document.getElementById("test");

myDiv.addEventListener("click", function() {
  if (myDiv.className === "decreased") {
    myDiv.classList.remove("decreased");
    myDiv.className = "increased";
    myDiv.textContent = "Decrease my font weight!";
  } else {
    myDiv.classList.remove("increased");
    myDiv.className = "decreased";
    myDiv.textContent = "Increase my font weight!";
  }
});

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

Answer №1

Answer №2

Answer №3

Similar questions

Position two div elements evenly with text enclosed in a container

Passport and Node.js team up to create powerful user group functionalities

Visualization of extensive datasets in JavaScript

what's the reason for ajax constantly sending requests back-to-back?

Struggling to properly implement an "Errors" Object in the state function of a React Login Form Component

Tips on transferring the id value from a modal window to an ajax click event?

Making requests using Axios in a web application created with Express, Node, and EJS

Update the package.json file by adding a new command to an existing script

Express and Angular2 Webpack integration

Is there a way to display a success message once the button has been activated?

Exploring AngularJS: Understanding the Differences Between $http's Success and Then

Why doesn't jQuery ajax work when sourcing the URL from a variable but works with a hard-coded URL?

Background image not displaying

The express app.get middleware seems to be malfunctioning due to a 'SyntaxError: Unexpected end of input'

Substitute the temporary text with an actual value in JavaScript/j

Ways to conceal and reveal content within div elements

What is the best way to add child elements to the parent element when the height limit has been reached?

Efficient methods for transferring information between a main and pop-up page within angularjs

How can VueJs effectively update the data fetched using the created function?

Comparing jQuery's min-width and width properties: A guide on eliminating pixels