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

As I scroll past the top or bottom of the page, the body's background color transitions to a new shade

incorrect encoding of Greek characters due to the multer upload package

Efficiently handling multiple responses in Express.js per single request

Strange spacing issues with inline-block elements and struggling to vertically center content within them

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

jQuery mobile enhancing user experience with dynamic background images

Having trouble extracting the responseText from the Ajax request

What is the best way to transform a string into React components that can be displayed on the screen?

Trouble arises with Pagination feature of Mui Data Table

Understanding the Code for Responsive Web Typography with line-height in ems

Ways to collect email address or name from an email message

Navigate to a specific moment in an HTML5 audio track by clicking on the progress bar

Scrolling triggers events

When using JSON.stringify, the output is null. However, when using document.write, the data

How can the useEffect Hook be utilized to perform a specific operation just one time?

Is it possible to choose an element directly without having to trace back to the parent element first?

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

How can states be passed down as props in React?

Arrange the select default option using AngularJS as the first option

What is the most efficient way to incorporate MongoDB into your codebase using ES6-style