Hello,

I used the accordion from this example https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example

Do not tell me how to make the title of the open elements stand out (for example, in strong). I see that aria-expanded - the property is open block or not, but how to link it with the properties of the title text is not clear ...

jquery3.1 / vuejs 2.5

2) And can these blocks be opened / closed programmatically?

EDITED:

In my vuejs templates I do:

<template> <div class="card offset-md-1"> <nav class="navbar navbar-expand-lg navbar-light bg-light" v-show="logged_user_id && logged_user_name"> <a class="navbar-brand" href="/"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" :aria-expanded="false" aria-label="Toggle navigation" id="myCollapsible"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> ... <script> export default { data() { return { logged_user_id: '', } }, created() { }, mounted() { $('#myCollapsible').on('hide.bs.collapse', function (e) { alert( "myCollapsible hide.bs.collapse::"+(-99) ) // ЭТОТ АЛЕРТ НЕ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ НЕ ВЫЗЫВАЕТСЯ // во время закрытия console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно) }) $('#myCollapsible').on('show.bs.collapse', function (e) { // во время открытия alert( "myCollapsible show.bs.collapse::"+(-88) ) // ЭТОТ АЛЕРТ НЕ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ НЕ ВЫЗЫВАЕТСЯ console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно) }) alert( "created AFTER!::"+(-6) ) // ЭТОТ АЛЕРТ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ MOUNTED ВЫЗЫВАЕТСЯ БЕЗ ОШИБОК В КОНСОЛЕ ... },

And the event handlers above are not called when clicking on the navbar button ... If you insert into the created event, it also does not work.

id is set as myCollapsible - only for my navbar, in other words, it is the only

 Vue :2.5.16 jQuery :3.3.1

What is the right way then ?

Thank!

    1 answer 1

    So you can track:

     $('#myCollapsible').on('hide.bs.collapse', function (e) { // во время закрытия console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно) }) $('#myCollapsible').on('show.bs.collapse', function (e) { // во время открытия console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно) })