html button css styling

Hi experts,

I have this fiddle:

https://jsfiddle.net/7nczhsr3/

Everything in this fiddle works fine jut like I want it.
The buttons launch a div pertaining to each button..

My question is only on the css styles on my buttons.


So when you launch my html page at this fiddle you first see this. A page with three buttons.:
page on launch
So if you click on button1 then div1 displays, if you click button 2 then div 2 displays, if you click button 3 then div 3 displays.



If you look at the css in my fiddle, I currently have the style set to this:

my buttons current css style
so the border color on the buttons is blue.

If you hover over a button then notice that the border color is this:    border: 2px solid #0094ff;


I set the active button tag like this to red:

            button:active {
                border: 2px solid #ff0000;
            }

But when I click on a button, the border is only red as long as I have my mouse button pressed, when I let go of the mouse press button the red button border color goes away.
I want this red style border: 2px solid #ff0000;   to remain on the button after I pressed it and let go of my mouse button.


How do  i fix my example so that the border color of whatever button I pressed stays red after i pressed it?

Anyone know what I'm doing wrong?

So then if I press button 1, I want the border style of my button to look like this:

button styles after i press button1
So then if I press button 2, I want the border style of my button to look like this:
button styles after i press button2
So then if I press button 2, I want the border style of my button to look like this:
button styles after i press button3
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dejan VasiljevicSys Admin and ProgrammerCommented:
Hi  maqskywalker,

Since Your div class is "button" I would add this jQuery script -
<script>
$('.button').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>

Open in new window

It will do the trick for Your button.

Thanks,
D.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
You're getting slightly confused between the pseudo 'active' class and having a .active class. The pseudo class, as you've discovered is only active whilst you're actually clicking on it.

What you need to do is add an 'active' class to the button as you click it and remove the active class from the others.

Change your CSS to include an active class, along with the pseudo class:

button:active, button.active  {
   border: 2px solid #ff0000;
}

Open in new window


And then add the class to the clicked button, and remove the active class from the other:

 $('.active').removeClass('active');
 $(this).addClass('active');

Open in new window


Here's an updated fiddle: https://jsfiddle.net/7nczhsr3/9/

I've also change the border to your button to be 2px wide, so that it matches the :hover state - prevents the 'jump' that you were getting
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See updated https://jsfiddle.net/7nczhsr3/12/

    //<![CDATA[ 
    $(function () {
        $('#MainDiv button').click(function () {
            $('.displayed').removeClass('displayed');
            var div = $(this).data('div');
            $(div).addClass('displayed');
           // ******************************
           // add a class that has a red border to the clicked button.
           // first remove any instance of the class in the MainDiv
            $('#MainDiv button').removeClass('redBorder');
            $(this).addClass('redBorder');
        });
    });//]]>  

Open in new window

.redBorder{ border: 2px solid red;}

Open in new window

0
Chris StanyonWebDevCommented:
Sheesh. The answer you accepted won't work and the assisted solution is the same as I posted.

Have I upset you somehow ??
0
maqskywalkerAuthor Commented:
Chris,
My mistake. I looked at the solution on my phone and accidentally overlooked your posting.
I will re-ask another question similar to this question and give you the points if you comment on it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.