jstree - stop single expanded node from collapsing

Using jstree is it possible to block the collapse of a single specific node?

I have a tree structure which can be expanded/collapsed at will... but I have certain nodes that should always be open and not allow the user to collapse them.

Is there a way to block the collapse (maybe through the data-jstree attribute on the <li>)... and if possible, a way to also remove the triangle against the item?

I've tried hooking into the close_node.jstree event but neither using a return false or e.preventDefault() is stopping it happening.

In the following example, I want the "Item 2 - Must Keep Open" to ALWAYS be open, and not allow the user to hide the "Always Visible" item...

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

add a comment |

Using jstree is it possible to block the collapse of a single specific node?

I have a tree structure which can be expanded/collapsed at will... but I have certain nodes that should always be open and not allow the user to collapse them.

Is there a way to block the collapse (maybe through the data-jstree attribute on the <li>)... and if possible, a way to also remove the triangle against the item?

I've tried hooking into the close_node.jstree event but neither using a return false or e.preventDefault() is stopping it happening.

In the following example, I want the "Item 2 - Must Keep Open" to ALWAYS be open, and not allow the user to hide the "Always Visible" item...

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

add a comment |

Using jstree is it possible to block the collapse of a single specific node?

I have a tree structure which can be expanded/collapsed at will... but I have certain nodes that should always be open and not allow the user to collapse them.

Is there a way to block the collapse (maybe through the data-jstree attribute on the <li>)... and if possible, a way to also remove the triangle against the item?

I've tried hooking into the close_node.jstree event but neither using a return false or e.preventDefault() is stopping it happening.

In the following example, I want the "Item 2 - Must Keep Open" to ALWAYS be open, and not allow the user to hide the "Always Visible" item...

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

Using jstree is it possible to block the collapse of a single specific node?

I have a tree structure which can be expanded/collapsed at will... but I have certain nodes that should always be open and not allow the user to collapse them.

Is there a way to block the collapse (maybe through the data-jstree attribute on the <li>)... and if possible, a way to also remove the triangle against the item?

I've tried hooking into the close_node.jstree event but neither using a return false or e.preventDefault() is stopping it happening.

In the following example, I want the "Item 2 - Must Keep Open" to ALWAYS be open, and not allow the user to hide the "Always Visible" item...

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

$(function() 
 $("#treeRoot").jstree(
 core: 
 themes: 
 variant: "small"
 
 
 );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <li data-jstree='"opened":true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

javascript jquery tree jstree

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

asked Nov 12 '18 at 16:01

freefaller

13.4k53866

add a comment |

1 Answer
1

active

oldest

votes

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

|
show 7 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53265854%2fjstree-stop-single-expanded-node-from-collapsing%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

|
show 7 more comments

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

|
show 7 more comments

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

$(function() 

 $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
 $.jstree.core.prototype.close_node = function(obj, animation) 
 node_obj = this.get_node(obj);
 // in case the flag exists - don't continue to with the original function.
 if (node_obj.state.prevent_close) 
 return;
 
 this.old_close_node(obj, animation);
 
 
 $("#treeRoot").on('loaded.jstree', function() 
 $('#treeRoot li').each((index, el) => 
 if ($(el).data('jstree') && $(el).data('jstree').prevent_close) 
 $(el).addClass('prevent-close');
 
 )
 ).jstree(
 core: 
 themes: 
 variant: "small"
 
 
 )
);

.jstree-default-small .jstree-open.prevent-close>.jstree-ocl 
 background-position: -71px -7px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
 <ul>
 <li data-jstree='"opened":true'>Root
 <ul>
 <li>Item 1</li>
 <!-- v-- this is the flag to prevent the close -->
 <li data-jstree='"opened":true, "prevent_close": true'>Item 2 - Must keep open
 <ul>
 <li>Always Visible</li>
 </ul>
 </li>
 <li>Item 3</li>
 </ul>
 </li>
 </ul>
</div>

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

edited Nov 12 '18 at 17:25

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

answered Nov 12 '18 at 16:58

Dekel

42.7k54667

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

|
show 7 more comments

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

Thanks for your time Dekel... is your code supposed to stop the collapse, or demonstrate how to override the close functionality?

– freefaller
Nov 12 '18 at 17:05

both, actually :) try to click on the "root" element (to close it).

– Dekel
Nov 12 '18 at 17:06

Ah, that's something I hadn't tried... as it's the "Item 2 - Must keep open" that I'm trying to block the closure of. Every parent-node should act as normal

– freefaller
Nov 12 '18 at 17:07

Just add the "prevent_close": true where you need it... I changed the code to set the prevent_close on the second element. check it now.

– Dekel
Nov 12 '18 at 17:08

Interesting... many thanks for the idea. Never keen on overriding functionality, in case the underlying functionality changes in future updates. Will have a play and let you know how I get on. If you do figure out removing the triangle, please let me know

– freefaller
Nov 12 '18 at 17:09

|
show 7 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb