Using jQuery to define and apply style attributes

I'm currently working on a script that will add a left and right border to a button in a row of 3 buttons when that specific button is clicked. The goal is for the borders to remain while the button is active, and disappear once another button is clicked. Here's the code I have so far:

$("#popular").click(function(){  
    clearBorders();
    // Add borders here (this part works)
}); 

$("#suggestions").click(function(){    
    clearBorders();
    // Add borders here (this part works)   
}); 

$("recent").click(function(){    
    clearBorders();
    // Add borders here (this part works)  
}); 

function clearBorders(){
    $('popular').css("border", "solid");
    $('suggestions').css("border", "none");
    $('recent').css("border", "none");
}    
});

Although I can successfully apply the borders to the buttons, I am encountering an issue with the clearBorders function not working as intended. Despite confirming that the function is indeed being called (by inserting an alert at the beginning), it seems to be ineffective. What could be causing this problem?

jqueryhtmlcss

Answer №1

Ensure to include the appropriate id (#) or class (.) designator symbol in your clearBorders() function for correct selector targeting

Answer №2

After conducting a test, I discovered that in order for this to work properly, you must wrap it in a $("document").ready(function(){}); function. I had already made adjustments to use classes instead of ids, so your mileage may vary depending on your setup. The test case provided below did not work for me until I added the document.ready function.

    <script type="text/javascript">
$("document").ready(function(){
    $(".popular").click(function(){ 
        clearBorders(); }
    ); 

    $(".suggestions").click(function(){         
        clearBorders();
        // add borders here (this part works)   
    });

    $(".recent").click(function(){    
    clearBorders();
    //add borders here (this part works)  
    }); }
);
    function clearBorders(){
        $('.popular').css("border", "1px solid red");
        $('.suggestions').css("border", "1px solid red");
        $('.recent').css("border", "1px solid red");
    };   
    </script>

rich

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

The viewport width in NextJS does not extend across the entire screen on mobile devices

I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...

javascripthtmlcsstypescriptnext.js

Modify the CSS property of a checkbox label when the checkbox is selected

Recently, I came across some interesting HTML code: <label> <input type="checkbox" value="cb_val" name="cb_name"> my checkbox text </label> After applying CSS, I successfully added a background-color to the <label> t ...

htmlcsscheckbox

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

htmlcssangularless

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

After the form is successfully submitted, you can remove the required attribute

Upon clicking the submit button of a form, an input box is highlighted with a red border if empty. After successful jQuery AJAX form submission, a message "data submitted" is displayed and the form is reset causing all input fields to be highlighted in red ...

javascriptjqueryhtmlajaxforms

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

javascripthtmljqueryblogger

z-index in CSS causes links to conflict

I am currently working on a project that requires an image to be displayed prominently on the website along with some links positioned behind it. However, I'm facing an issue where I can't click on the links after implementing z-indexes to layer ...

htmlcsshyperlinkmenuz-index

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

csscss-grid

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

javascriptjqueryhtmlcsslayout

Is the Owl carousel Auto Play feature malfunctioning when hovered over?

I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover ove ...

jqueryhtmlcssowl-carousel

Have an overlay on a specific area of the webpage while ensuring the remaining sections remain interactive to the user's inputs

Looking for a way to add an overlay in a specific area of a webpage without blocking the other sections? I attempted to use the LightBox feature from primefaces components, but it didn't give me the desired result. I'm struggling to keep the unco ...

cssjsfprimefaces

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

javascripthtmlhyperlink

Embedded URL in dynamically created AJAX text

I created a search field that uses ajax/jquery to generate a list of users. Result: <li class="list-group-item"> <span class="glyphicon glyphicon-user"></span> <span class="badge addUserToGroup" data-user="{{ user.getId }}"&g ...

javascriptjqueryajax

Nested jQuery UI Selectable causing propagation problems

My issue lies in the nested jQuery UI selectable functionality. When I click on Item 1, it is selected as expected. However, when clicking on Item 111 or 1111, it selects all the way up to Item 2. What I require is for only the element that is clicked on t ...

jqueryhtmljquery-uijquery-ui-selectable

Adaptable material for collapsible panels

I'm facing a challenge with implementing an accordion menu. My goal is to have a 4 column layout that transforms into an accordion menu when the browser width is less than 600px. It almost works as intended, but there's a glitch. If you start at ...

javascriptjqueryaccordion

Using jQuery to manipulate the image within a specific div element

I'm facing an issue with locating the img src within a div. I've written a function to find all the divs with specific ids: function identifyDiv(){ divArray = $("div[id^='your']"); divArray = _.shuffle(divArray); } This is the ...

javascriptjqueryhtmlcss

Change the border color of a form field in a material design if the user interacts with the

Is there a way to change the border color of a material form field in Angular when it is touched, focused, or active? I attempted to modify the color by overriding material css-class and also tried creating my own css class, but neither method had any ef ...

cssangular-material

What is the best way to incorporate random colors from a preselected color palette within my JavaScript code?

I couldn't figure it out var colorsList = ['#800000', '#A36386', '#FFD4D8, '#223CFF', '#F5FF5A', '#FF5555', '#A7EBFF']; var color = colorsList[Math.floor(Math.random() * colorsList. ...

jqueryrandomcolors

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap