Select the element to emphasize it and reduce the visibility of others

Question

Select the element to emphasize it and reduce the visibility of others

I'm currently facing an issue with a block that contains multiple divs representing products. My goal is to have the selected product highlighted while the rest appear less prominent when clicked. I've managed to achieve this functionality, however, every time a new product is clicked, all previously selected products also become less sharp.

Below is my current jQuery code:

$(document).ready(function () {

  var $all_listItems = $('.choose-format-block .format-area a');
  $all_listItems.on('click', function () {
    var index = $all_listItems.index(this);
    $(this).siblings().stop().fadeTo(300, 0.6);
    $(this).parent().siblings().stop().fadeTo(300, 0.3);
  });

});

Here's a link to my working example on jsfiddle: http://jsfiddle.net/justamir/P7b5T/2/

If anyone could provide assistance with this (I am new to jQuery), it would be greatly appreciated.

jquery css onclick

Answer 1

Answer №1

To achieve this effect, I recommend using CSS opacity and transitions instead of jQuery animations. You can view the updated fiddle here:

http://jsfiddle.net/P7b5T/3/

$(document).ready(function () {
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $('.container').addClass('selected');
        $('.format-area.active').removeClass('active');
        $(this).parents('.format-area').addClass('active');
    });
});

CSS:

.container .format-area {
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.container.selected .format-area {
    opacity: .3;
}

.container.selected .format-area.active {
    opacity: 1;
}

The "selected" class is added to the container when an item is selected, changing all items' opacity to .3. By adding the "active" class to the selected item, its opacity returns to 1.

EDIT: To deselect all items, simply remove the "selected" class from the container.

Answer 2

To achieve this effect, I recommend using CSS opacity and transitions instead of jQuery animations. You can view the updated fiddle here:

http://jsfiddle.net/P7b5T/3/

$(document).ready(function () {
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $('.container').addClass('selected');
        $('.format-area.active').removeClass('active');
        $(this).parents('.format-area').addClass('active');
    });
});

CSS:

.container .format-area {
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.container.selected .format-area {
    opacity: .3;
}

.container.selected .format-area.active {
    opacity: 1;
}

The "selected" class is added to the container when an item is selected, changing all items' opacity to .3. By adding the "active" class to the selected item, its opacity returns to 1.

EDIT: To deselect all items, simply remove the "selected" class from the container.

Answer 3

Answer №2

The issue lies in not properly resetting the fadeout div that is already active.

To resolve this, consider implementing the following approach: Upon every click event, initiate a reset of all items before proceeding to adjust the opacity levels using the fadeTo method for all other elements except the one that was clicked.

$(document).ready(function () {

// Click behavior for product size selection
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $(this).parent().parent().children().stop().fadeTo(300, 1); // Reset all items
        $(this).parent().siblings().stop().fadeTo(300, 0.3); // Fade out others
    });

});

Answer 4

The issue lies in not properly resetting the fadeout div that is already active.

To resolve this, consider implementing the following approach: Upon every click event, initiate a reset of all items before proceeding to adjust the opacity levels using the fadeTo method for all other elements except the one that was clicked.

$(document).ready(function () {

// Click behavior for product size selection
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $(this).parent().parent().children().stop().fadeTo(300, 1); // Reset all items
        $(this).parent().siblings().stop().fadeTo(300, 0.3); // Fade out others
    });

});

Select the element to emphasize it and reduce the visibility of others

Answer №1

Answer №2

Similar questions

Tips for streamlining the use of hidden and visible div elements with concise code

Is the CSS3 bar chart flipped?

Text that is curving around a D3.js pie chart

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Which is more effective: utilizing the "hidden" CSS attribute or fetching every new set of images individually?

Optimal practices for naming divs in XHTML/CSS

How can I reset a CSS position sticky element using JavaScript?

Would it be possible to use a script to convert the y-axis values of the chart into Arabic numerals?

The backend error message isn't triggering an alert!

Leveraging tailwind for achieving dynamic height responsiveness

jQuery: Retrieve data from a table

Make the text area occupy the full width of the remaining screen space

Div sliding out of view

Tips on working with an array received from a PHP script through AJAX

What's the best way to save data from an HTML input field into a JavaScript array?

Retrieve data from the database at the optimal time interval, and halt the process once the data has been successfully received

Interactive horizontal web design with center alignment and dynamic scrolling feature

Creating a div with a scrollbar limited to a maximum of 100% of the page size

Is it possible to send form data using the file upload function?

Unable to deactivate button using JavaScript following an AJAX request