CSS active class not working for tab content

Question

I'm trying to set the left border of the list item with Link text to red on active, and when the user clicks another list item, the previous border is set to the original and the successive list item is then set to a red left border. I tried with an :active class, but that is not working correctly:

      <ul class="list-group">
        <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">Link</li>
      </ul>

CSS

li {
  list-style-type: none;
}

.list-group li:active {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

JSFIDDLE: LINK

Your HTML markup is completely invalid, whether that factors in to what you're attempting at all. The only element that's an acceptable child to `
` is `
- not `
`. I'd suggest putting your `
` in an `
` and straightening out any HTML issues before moving on to addressing CSS
No, the left border flashed red when clicking the link, but I need it to stay red when active. — Matt, Apr 14 '17 at 21:17
...And what I'm saying is that before you start moving on to CSS, you should correct your HTML. Wouldn't you rather fix the foundation before building a house on it? — Tyler Roper, Apr 14 '17 at 21:19
I've simplified the markup, so its just a matter of how to set the `li` left border to red on click (not just hover). — Matt, Apr 14 '17 at 21:20
like this? https://jsfiddle.net/vxz7zrg9/3/ - And as a supplement to what I mentioned above, take a look at this: [Can I use DIV as a direct child of UL?](http://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul). — Tyler Roper, Apr 14 '17 at 21:24

Tushar Gupta · Accepted Answer · 2017-04-14T21:30:17.387

You can use jQuery to achieve that.

remove :active
create a class .cative with the same css like before you had fro :active
Create a jQuery to toggle class active

JS FIDDLE

$('.list-group li').on('click', function() {
  $('.list-group li').not(this).removeClass('active');
    $(this).addClass('active');
})

li {
  list-style-type: none;
}

.active {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-12">
    <div class="col-lg-4 col-md-4 col-sm-4 question-list">
      <ul class="list-group">
        <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">Link</li>
        <li class="2" data-toggle="collapse" data-target="#21" aria-expanded="false">Link</li>
        <div id="2" class="tab-content collapse mobile-answer">
          <p class="header">content of link</p>
          <div class="answer">
            <p>Bunch o' content here</p>
          </div>
        </div>
         <div id="21" class="tab-content collapse mobile-answer">
          <p class="header">content of link</p>
          <div class="answer">
            <p>Bunch o' content here</p>
          </div>
        </div>

      </ul>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

That's really close. How can I set it to remove the active class from all other list items before applying it to the currently selected item? — Matt, Apr 14 '17 at 21:24

Varin · Answer 2 · 2017-04-14T21:36:54.770

0

You can use jquery for this as I don't think it is possible with the pure CSS if you're using Bootstrap collapse.

$('.tab-content').on('hide.bs.collapse', function () {
    $(this).prev('li').removeClass('liborder');
})

$('.tab-content').on('show.bs.collapse', function () {
     $(this).prev('li').addClass('liborder');
})

jsfiddle here: https://jsfiddle.net/vxz7zrg9/5/

edited Apr 14 '17 at 21:36

answered Apr 14 '17 at 21:26

Varin

2,354
2
20
37

score 0 · Answer 3 · answered Apr 14 '17 at 21:27

If you're able to add an <a> tag around your "Link" text, you can achieve this using pure CSS:

li {
  list-style-type: none;
  display: inline-block;
  margin: 0 10px;
}

li a,
li a:hover {
  color: inherit;
  text-decoration: none !important;
}

.list-group li a:focus {
  border-left: 3px solid #ce2523;
  padding-left: 7px;
  color: #000000;
}

<ul class="list-group">
  <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">
    <a href="#">Link</a>
  </li>
  <li class="2" data-toggle="collapse" data-target="#2" aria-expanded="false">
    <a href="#">Another Link</a>
  </li>
</ul>

CSS active class not working for tab content

3 Answers3