List Group Item Selection

[santino]

Hello there!
I have almost finished a website for a proposal and I’m having some problems on creating a list of group item, which is a custom menu, that changes its style when clicked.
I tried to search how to do this on internet but I’m not able to implement it in blocs.

This is an example of how it should work:

Thanks in advance for your help!

[PeteSharp]

If you click on the resources button you will notice 2 issues straight away. Your example is using Vue and it’s a bootstrap 3 solution. There are significant changes between bootstrap 3 and 4, but in this case, list groups are the same.

But a simple solution is this…

<div class="list-group" id='listGroup'>
  <a href="#" class="list-group-item active">Cras justo odio</a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<script>
$(".list-group-item").on("click",function(){
    $(".list-group-item.active").removeClass('active');
    $(this).addClass('active');
});
</script>

[santino]

Thanks for your help @PeteSharp but I still have some errors. First I think the the classes underlined added by blocs can cause the issue (other list items not select):

second, I have this error when I preview the page on the browser:

[PeteSharp]

Can you PM me you project file or an example project file of what you have.

[PeteSharp]

SOLVED - script just needed to go in footer not header.