更改引导程序切换按钮的状态

Question

I have a button:

<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>

That controls when this div is open or closed to show 'more options'.

<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>

And I use a Knockout.js observable to keep it open when the data refreshes inside the div. I don't want a data refresh to collapse the div. The issue is when I do this and keep the div open, the button thinks that the div is closed. So the next time the user clicks the button, the div closes real quick and opens back up again, requiring two clicks on the button to get the div to close.

The expected behavior is to keep the div open during a data refresh, but have the button know that the div is open and close it with just one click.

I've set the CSS collapse with knockout in the div and I'm looking for a similar way to set the button for it to know that the div is not collapsed.

I've noticed that when the button is clicked to expand the div, the aria-expanded attribute is set to true where it didn't exist when the button is initially rendered; and when the button is clicked to collapse the div, the CSS property 'collapsed' is added to the button. I've played around with adding and changing these via knockout with no success.

It should be noted that the button is refreshed with the data.

Answer 1

I've decided to remove the bootstrap toggle button functionality and just go with the jQuery toggle in combination with knockout. The jQuery way just offers more control.

<button type="button" class="btn btn-sm btn-primary" 
        data-bind="click: $root.ChangeMoreOptions">
    More Options
</button>

<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>

Knockout:

 //Open or close div
 self.ChangeMoreOptions = function () {
     if (self.IsCollapsed() === true) {
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
         self.IsCollapsed(false);
     } else {
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
         self.IsCollapsed(true);
     }
 }

 //Keep div open on refresh if it is already open
 //Search for 'none' in the style display: none
 self.FixMoreOptions = function () {
     if (($('#MoreOptionsDiv').attr('style').search('none') > -1) 
        && (self.IsCollapsed() === false)) {
         //Toggle closed div back to open
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
     }
 }