Expand JsTree Options: View Additional Choices

Question

Expand JsTree Options: View Additional Choices

Can a "show more" option/link be implemented in jsTree? I am looking to display only a portion of the child elements with an option to expand and show all. Despite searching online, I have not been able to find a solution. Any assistance or suggestions would be greatly appreciated.

For example, let's consider that parent-1 has 10 child nodes and the Main Root consists of 5 parent nodes.

Main Parent
    - Parent - 1
        - child-1
        - child-2
        - child-3
        show 7 more parent-1 elements //LINK
    - Parent - 2
        - child-1
        - child-2
    - Parent - 3
        - child-1
        - child-2
    show 2 more Main Parent elements //LINK

The desired outcome is illustrated in the following image:

https://i.sstatic.net/DUSWC.png

Is it feasible to achieve this? Are there existing plugins that facilitate this functionality within jsTree? Alternatively, are there other tree visualization libraries that offer support for such features?

javascript jquery html css jstree

Answer 1

Answer №1

You can possibly utilize classes/childElement count to achieve this. Depending on your display needs, you can use ids/classes to keep certain elements visible or toggle show/hide options. This concept can be applied to child elements (such as list items in a list) and their parent elements, making it easily adaptable once the initial function is created.

Below is an example using a list to illustrate the concept (written in plain javascript and open for adjustments...). While Jquery may make the code shorter, knowing vanilla JavaScript is always advantageous in my opinion.

var x = document.getElementById("show");
//var root = document.getElementsByTagName('body')[0];
var count = x.childElementCount;
var btn1 = document.getElementById("ulmore");
btn1.innerHTML = "+ Show all " + count + " li children";
document.getElementById("ulmore").addEventListener("click", showmore);

function showmore() {
  //var d = document.getElementsByClassName("tg1").length;
  //use d if you want to show "show d more children" instead of the full amount of children
  var el = document.getElementsByTagName("li");

  var i;
  for (i = 0; i < el.length; i++) {
    if (el[i].classList.contains("tg1")) {
      //el[i].style.display = "block"; works
      el[i].classList.toggle('more');
      if (el[i].classList.contains("more")) {
        btn1.innerText = "Hide children";
      } else {
        btn1.innerText = "+ Show all " + count + " li children";
      }
    }
  }
}

body {
  padding: 1em;
  font-size: 10pt;
}

ul {
  list-style: none;
  width: 10em;
  padding: 0px;
}

li {
  text-align: left;
  line-height: 1.5;
  background: lightblue;
  border: 1px solid #444;
  margin: 1px 0px;
  padding: 2px;
}

span {
  display: inline-block;
}

div {
  display: inline-block;
  width: 100%;
  float: left;
  margin: 1em 2em 1em 0em;
}

.tg1 {
  background: lightsteelblue;
  display: none;
}

.more {
  background: lightsteelblue;
  display: block;
}

/*.tog2 {
  display: none;
}

.grow {
  background: yellow;
  display: inline-block;
}*/

<body>
  <div id="ulbit">
    <h4>Demo List</h4>
    <ul id="show">
      <li>One</li>
      <li>Two</li>
      <li class="tg1">Three</li>
      <li class="tg1">Four</li>
      <li class="tg1">Five</li>
      <li class="tg1">Six</li>
      <li class="tg1">Seven</li>
      <li class="tg1">Eight</li>
    </ul>
    <span id="ulmore"></span>
  </div>

<!--  <div class="tog2">
    Div 2 hello
  </div>
  <div class="tog2">
    Div 3
  </div>
  <span id="divmore"></span>-->
</body>

For a practical demonstration with body 'parent' elements included, here's a fiddle link within the code. (Note: even a <br> tag [when used between divs] will be considered a top-level element.. Counting by tagName (or className) would likely be most helpful if you need to count various types of 'parent' elements (instead of just body children). Examples of both methods are provided in the fiddle)

I hope this explanation proves useful

Answer 2

You can possibly utilize classes/childElement count to achieve this. Depending on your display needs, you can use ids/classes to keep certain elements visible or toggle show/hide options. This concept can be applied to child elements (such as list items in a list) and their parent elements, making it easily adaptable once the initial function is created.

Below is an example using a list to illustrate the concept (written in plain javascript and open for adjustments...). While Jquery may make the code shorter, knowing vanilla JavaScript is always advantageous in my opinion.

var x = document.getElementById("show");
//var root = document.getElementsByTagName('body')[0];
var count = x.childElementCount;
var btn1 = document.getElementById("ulmore");
btn1.innerHTML = "+ Show all " + count + " li children";
document.getElementById("ulmore").addEventListener("click", showmore);

function showmore() {
  //var d = document.getElementsByClassName("tg1").length;
  //use d if you want to show "show d more children" instead of the full amount of children
  var el = document.getElementsByTagName("li");

  var i;
  for (i = 0; i < el.length; i++) {
    if (el[i].classList.contains("tg1")) {
      //el[i].style.display = "block"; works
      el[i].classList.toggle('more');
      if (el[i].classList.contains("more")) {
        btn1.innerText = "Hide children";
      } else {
        btn1.innerText = "+ Show all " + count + " li children";
      }
    }
  }
}

body {
  padding: 1em;
  font-size: 10pt;
}

ul {
  list-style: none;
  width: 10em;
  padding: 0px;
}

li {
  text-align: left;
  line-height: 1.5;
  background: lightblue;
  border: 1px solid #444;
  margin: 1px 0px;
  padding: 2px;
}

span {
  display: inline-block;
}

div {
  display: inline-block;
  width: 100%;
  float: left;
  margin: 1em 2em 1em 0em;
}

.tg1 {
  background: lightsteelblue;
  display: none;
}

.more {
  background: lightsteelblue;
  display: block;
}

/*.tog2 {
  display: none;
}

.grow {
  background: yellow;
  display: inline-block;
}*/

<body>
  <div id="ulbit">
    <h4>Demo List</h4>
    <ul id="show">
      <li>One</li>
      <li>Two</li>
      <li class="tg1">Three</li>
      <li class="tg1">Four</li>
      <li class="tg1">Five</li>
      <li class="tg1">Six</li>
      <li class="tg1">Seven</li>
      <li class="tg1">Eight</li>
    </ul>
    <span id="ulmore"></span>
  </div>

<!--  <div class="tog2">
    Div 2 hello
  </div>
  <div class="tog2">
    Div 3
  </div>
  <span id="divmore"></span>-->
</body>

For a practical demonstration with body 'parent' elements included, here's a fiddle link within the code. (Note: even a <br> tag [when used between divs] will be considered a top-level element.. Counting by tagName (or className) would likely be most helpful if you need to count various types of 'parent' elements (instead of just body children). Examples of both methods are provided in the fiddle)

I hope this explanation proves useful

Answer 3

Answer №2

If you haven't already, consider utilizing the "before_open.jstree" event to customize how the tree is displayed. Here's an example showcasing part of the demo page from the jstree site:

<!DOCTYPE html>
<html lang="en>
<!-- Rest of the HTML code here -->

Give it a try and see if it suits your needs!

Answer 4

If you haven't already, consider utilizing the "before_open.jstree" event to customize how the tree is displayed. Here's an example showcasing part of the demo page from the jstree site:

<!DOCTYPE html>
<html lang="en>
<!-- Rest of the HTML code here -->

Give it a try and see if it suits your needs!

Expand JsTree Options: View Additional Choices

Answer №1

Answer №2

Similar questions

Change the color of the navbar after scrolling past 70% of the viewport height using

Bluebird refuses to execute the then() function, despite the code that was functional before

Having trouble with connecting to Gmail while using Nodemailer? Facing a Connection Timeout

Having trouble getting JQuery UI Tabs to display properly in an HTML5 environment?

Information is only displayed within the Node Request function and is not accessible to

What are some ways to optimize this scrolling event in jQuery that seems to be triggering excessively?

Observing the completion of a subscriber function

Utilize identical code across various jQuery instances

Let's dive into the process of creating an express.js server!

Tips for changing the first letter to uppercase in a p5.js variable

Creating a dynamic name in TypeScript for an object to be utilized in an onClick event

How to send form group in Angular when the enter key is pressed

Displaying a variable in HTML using PHP before it's actually declared

steps for aligning an enlarged div in the middle upon hovering?

Utilizing Material UI Grid spacing in ReactJS

What circumstances result in async methods throwing errors and how can you effectively handle them?

How can I hide selected options in GraphQL playground?

The .htaccess directive aimed at eliminating .html from the URL appears to be malfunctioning

What could be the reason behind receiving an "undefined" message when attempting to access db.collection in the provided code snippet?

Is there a way to restrict my input to only 10 numbers without allowing any characters?