attempting to display an element using jQuery that belongs to the identical class

Question

attempting to display an element using jQuery that belongs to the identical class

I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional class .box_one and hide the rest of the boxes while retaining their shared class .box_slide.

The issue is that currently all the boxes are hidden when clicked. Can someone suggest a more effective approach to achieve this?

$('.modif').click(function (){    
    var title = $(this).attr('title'); 
    $('.box_slide').hide();
    $('.box_' + title).show();
});

jquery css

Answer 1

Answer №1

The description states that the title is "box_one", but in the code, it is written as

 $('.box_' + title).show();

This will result in "box_box_one"

This inconsistency might be causing the issue.

The corrected code should be:

$('.box_slide.box' + title).show();

Answer 2

The description states that the title is "box_one", but in the code, it is written as

 $('.box_' + title).show();

This will result in "box_box_one"

This inconsistency might be causing the issue.

The corrected code should be:

$('.box_slide.box' + title).show();

Answer 3

Answer №2

I recommend updating

$('.box_' + title).show();

to this:

$('.box_slide[title=box_' + title + ']').show();

Answer 4

I recommend updating

$('.box_' + title).show();

to this:

$('.box_slide[title=box_' + title + ']').show();

Answer 5

Answer №3

To display all elements with a class that starts with box_ and hide a specific one, you can utilize the

Attribute Starts With Selector \[name^="value"\]

in jQuery:

$('.modif').click(function (){    
    $("[class^='box_']").show();
    $('.box_slide').hide();
});

Answer 6

To display all elements with a class that starts with box_ and hide a specific one, you can utilize the

Attribute Starts With Selector \[name^="value"\]

in jQuery:

$('.modif').click(function (){    
    $("[class^='box_']").show();
    $('.box_slide').hide();
});

Answer 7

Answer №4

Based on my interpretation of your inquiry, the solution below is likely to be effective

$('.modify').on('click', function (){    
    var topic = $(this).attr('data-topic'); 
    $('.panel').hide();
    $('.panel #' + topic).show();
});

Answer 8

Based on my interpretation of your inquiry, the solution below is likely to be effective

$('.modify').on('click', function (){    
    var topic = $(this).attr('data-topic'); 
    $('.panel').hide();
    $('.panel #' + topic).show();
});

Answer 9

Answer №5

Implement this.

$('.modify').on('click', function (){    
    var title = $(this).attr('title'); 
    $('.sliding_box').hide();
    $('.box_' + title ).show();
});

Answer 10

Implement this.

$('.modify').on('click', function (){    
    var title = $(this).attr('title'); 
    $('.sliding_box').hide();
    $('.box_' + title ).show();
});

attempting to display an element using jQuery that belongs to the identical class

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Caught an error: Unlawful invocation encountered during AJAX transmission

Press the button in an HTML document to activate JavaScript

What is the most effective method of verifying image loading?

What is the method for obtaining the CSS text content from an external stylesheet?

What is the best way to improve the design of this division that includes buttons?

Exploring the process of adding arrays to highcharts using jQuery

Display a loading animation before the page loads upon clicking

Troubleshooting issue: `will_paginate` and jQuery integration not functioning properly due to non-responsive

Revolutionary AJAX-powered File Upload feature

Creating a circular text element with text both in the center and around the edges using CSS

Enhancing react-to-print functionality for optimal performance across various browsers and mobile platforms

Transition smoothly between images using CSS in a continuous loop

Pandas now supports exporting data frames to HTML with the added feature of conditional

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

What is the best way to switch the site header in JavaScript or jQuery?

Error: The function initMap() is not recognized in the Google Maps API

unable to display loading image prior to upload

"Apply a class to a span element using the onClick event handler in JavaScript

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

Guide to fetching and returning data from AJAX using a function