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();
});
jquerycss

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

I recommend updating

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

to this:

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

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 №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 №5

Implement this.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a clock using PHP

Seeking a way to display server time on my website, I have successfully implemented client-side time using JavaScript. How can I now showcase the server time? Are there any ZendFramework classes that can assist with this? Currently, I am utilizing the fo ...

phpjavascriptjqueryajax

What server-side PHP script should be used for file uploading with a progress bar in the jquery.form.js?

I am having trouble setting up a file upload function similar to the one demonstrated at http://jquery.malsup.com/form. The example provides a progress bar for file uploads, but it does not include an example of the server-side script. Although I know how ...

phpjqueryfile-uploadserver-side-scripting

Partial button clickability issue

There is a puzzling error where the button in the 'red area' is not clickable, and I can't seem to figure out why. Below are images illustrating the issue: https://i.stack.imgur.com/aPfcR.png https://i.stack.imgur.com/v5knZ.png Upon reac ...

htmlcssreactjsbuttonsass

Do we really need to use the eval function in this situation?

Just wondering, is it reasonable to exclude the eval() function from this code? Specifically how <script> ... ... function addGeoJson (geoJsonPath, iconPath = "leaflet-2/images/marker-icon.png", iconSize = [30,50], popUpContent, ...

javascriptjqueryjsonleafleteval

What is the Best Way to Create a Form Inside a Box?

Hello there! I am trying to create a form underneath the box labeled "New Referral," but I'm having trouble figuring it out. I would like to include sections for first name, last name, date of birth, phone number, email, and address under the box. Any ...

htmlcss

Concealing the submit button until a file has been selected

How can I make the submit button invisible until a file is selected? <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="imageURL[]" id="imageURL" /> <input type="submit" value="submi ...

javascriptjqueryhtmlcss

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Transmitting content via ajax to a dropdown list does not always ensure that the selection is fully set

Using AJAX, I am sending an ID to retrieve a specific name (label) along with its code. This retrieved data will be displayed as the selected value in my dropdown list within a Bootstrap Modal Form. Currently, I am able to fetch the code enclosed within t ...

phpjqueryajaxbootstrap-modalbootstrap-5

Hover over a row in one table to modify the appearance of another row in a different table

Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related? You can find a JSFiddle link illustrating what I am trying to achieve. Here is an example of the code: table#table1 #el1:hover + ta ...

htmlcss

CSS navigation bar (background gradient problem)

I have encountered an issue with my multi-tier navigation menu where tiers below tier 1 are displaying an unexpected block to the left of the options. I suspect this problem is related to the background gradient applied, but I haven't been able to fin ...

htmlcss

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

javascriptjqueryhtmlcssjquery-ui

Finding All Initial Table Cells in jQuery

Is there a streamlined method for retrieving all td elements (cells) from every row within a specific table, or do I have to manually iterate through the collection myself? ...

javascriptjquery

Approach to converting between metric and imperial measurements for weight and height

When prompting users to enter their weight, it's important to consider both metric and imperial units. One convenient approach might be to provide a dropdown menu for users to choose their preferred unit of measurement before filling in the correspond ...

jqueryhtmlformsservletsweb

Updating a d3.js force-directed graph may retain previous JSON data during the reloading process

Having a d3.js force-directed graph that pulls data from a JSON feed, I encounter an issue when clicking on a node. Although the updated JSON is correct, the displayed graph does not reflect this new data. It seems like the graph is retaining previous info ...

javascriptjqueryjsond3.jsforce-layout

Combining load and change events in jQuery at the same time

Often times, I find myself needing to attach a behavior to an element both after it has loaded and after a specific event has been triggered (such as "change"). I believe the most efficient approach would be to combine these actions in one line: $('# ...

javascriptjquery

What is the best way to terminate a file upload initiated by ajaxSubmit() in jQuery?

A snippet of code I currently have is: UploadWidget.prototype.setup_form_handling = function() { var _upload_widget = this; $('form#uploader') .unbind('trigger-submit-form') // Possibly a custom method by our company . ...

javascriptjqueryajaxformsfile-upload

Achieve full width with flexbox column wrap while minimizing the height

How can I arrange elements in columns within a container with a fixed width and variable height, when the number of elements is unknown? My challenge is that I do not know the maximum width of the child elements, preventing me from setting specific column ...

cssflexbox

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngOnInit() { this.items = [&apos ...

javascripthtmlcssangulartypescript

Preventing bootstrap.html or index.html from being included in the history stack using jQuery mobile

I'm currently developing a mobile application using jQuery mobile and PhoneGap. Upon launching the app, a dynamic frontpage is loaded based on certain conditions, such as whether the app has been configured or not. To handle this, I have created a b ...

jqueryjquery-mobilehistorybootstrapping

The Jquery UI confirmation dialog is working flawlessly on the Fiddle platform, but it is not displaying correctly on the

After testing this code snippet on a fiddle and seeing it work perfectly, I attempted to implement it on my website only to find that there is no border appearing, and the layout appears disorganized. Even after removing all the CSS styles and inspecting ...

jqueryjquery-uicss