• In 1.27, when editing a collapsible div, the collapsed element was automatically expanded (and the js toggle disappeared)
• In 1.33, when editing the same collapsible div, the collapsed element remains hidded and what looks like the js toggle is displayed but it does not work (i.e clicking on it does nothing)

I have traced the difference in behavior to jquery.makeCollapsible.styles.less: by preventing this file from loading, editing a collapsible element in 1.33 behaves in the same way as in 1.27. However, I do not know if nothing else breaks because of the missing styles.

Change 547207 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Expand collapsible blocks in editor, like we do with collapsible tables

https://gerrit.wikimedia.org/r/547207

It seems to work nicely. One question, though: was the change designed to show the inactive [Expand] toggle?

In T236247#5622009, @ti_infotrad wrote:

It seems to work nicely. One question, though: was the change designed to show the inactive [Expand] toggle?

Yes, we try to make the editing mode look the same as the reading mode wherever possible. Although it should be greyed out, and not just black like currently in that patch. (We did collapsible tables the same way some time ago.)

Change 547207 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Expand collapsible blocks in editor, like we do with collapsible tables

https://gerrit.wikimedia.org/r/547207

Still running into issues, collision with collapsible table option in VE. I will try and post an example.

Here is a sample code where the client is experiencing an issue:

{| width="100%" cellspacing="3" cellpadding="3" border="0" 
| colspan="6" style="text-align: center; background-color: #FC4A1A" |<font color="#ffffff"><font size="5"> '''Reports / Rapports d'évaluation'''</font> 
|}
<blockquote>''*The evaluation strategies and final reports below were approved by PMEC.'' </blockquote><blockquote>''*Les strategies et les rapports final ci-dessous ont été approuvé par CMRE.'' </blockquote>
<div class="mw-collapsible mw-collapsed" id="collapse-pre-one">
 <div class="mw-collapsible-toggle toccolours" style="float: none;">
  <div class="mw-collapsible-toggle-row">
   <div class="mw-collapsible-toggle-header"> <span style="color:blue;"><span style="font-size: large;"> Evaluation Reports | Rapports d'évaluation (2015-2019)  </span></span> [[File:Click Here Icon.png|frameless|25x25px|left]]</div>
  </div>
 </div>
<div class="mw-collapsible-content">
{| class="wikitable sortable"
! colspan="4" |Evaluations
Évaluations
! colspan="2" |InfoBank/EDRMS
InfoBank
|-
!Year Année
!Stream Catégorie
!Theme and Country 
Thème et pays
!Evaluation Title and Link  
Titre et lien de l'évaluation
!Evaluation Report
Rapport d'évaluation
!Evaluation Design
Modèle d'évaluation
|-
|2021
|Development
Développement
|Multi
|Miltilateral Organization Performance Assessment Network (MOPAN) Evaluations
|In progress
En progrès
|In progress
En progrès
|-
|2020
|Trade
Commerce
|Clean Technology
éco-technologies
|Evaluation of the International Business Development for Clean Technology 
|In progress
En progrès
|In progress
En progrès
|}
</div>
</div>
{| width="100%" cellspacing="3" cellpadding="3" border="0" 
| colspan="6" style="text-align: center; background-color: #FC4A1A" |<font color="#ffffff"> <font size="5"> 
|}

So what happens here is that, when editing the above page with VE, the table contents are not visible. They can be made visible by turning the table options "collapsible" and "initially collapsed" but then, the end user will have to click twice to see the full contents - once on the custom toggle and once on the table toggle.

Commenting out following section in resources\src\jquery\jquery.makeCollapsible.styles.less fixes the issue

.mw-collapsed:not( @{exclude} ) {
		// Avoid FOUC/reflows on collapsed elements by making sure they are opened by default (T42812)
		> p,
		> table,
		> thead + tbody, // 'https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Simple#Collapsed_by_default'
		tr:not( :first-child ),
		.mw-collapsible-content {
			display: none;
		}
	}

but I am sure doing this breaks something else :-)

To be more specific, the line that causes the issue described above is

tr:not( :first-child ),

The code change below (implemented in extensions/VisualEditor/modules/ve-mw/init/styles/ve.init.mw.Target.css) fixes the issues my clients are experiencing

.client-js .mw-collapsed:not( .mw-made-collapsible ) > p,
.client-js .mw-collapsed:not( .mw-made-collapsible ) > table,
.client-js .mw-collapsed:not( .mw-made-collapsible ) > thead + tbody,
.client-js .mw-collapsed:not( .mw-made-collapsible ) .mw-collapsible-content {
       display: block;
}
.client-js .mw-collapsed:not( .mw-made-collapsible ) tr:not( :first-child ){
       display: table-row;
}

Yeah, we should just make our selectors exactly match jquery.makeCollapsible.styles.less, like you did.

Note that there are specific display values for table (display: table) and tbody (display: table-row-group), I'm not sure if that makes a difference in practice, but I'll use them just in case.

Change 550766 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Exactly match collapsible logic of jquery.makeCollapsible

https://gerrit.wikimedia.org/r/550766

@ti_infotrad Could you try out the patch above and confirm that it also works the same?

Yes I will.

Change 550766 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Exactly match collapsible logic of jquery.makeCollapsible

https://gerrit.wikimedia.org/r/550766

Sorry for the delay. I confirm the fix functions as expected.

Thanks!