I am trying to implement a tree view with the following code snippet. Within the tree view, there are spans that have either the CollOpen or CollClosed class assigned to them. How can I toggle between these two classes on click for each span?
.treeView{
-moz-user-select:none;
position:relative;
}
...
</ul>I am looking to achieve a functionality where, upon clicking on a span with the class ColOpen, it gets replaced with ColClosed and the corresponding ul element is hidden. However, I am unsure about how to identify which specific span was clicked by the user.
One approach to solve this issue is by listening for click events on a container element (such as the treeview) and instructing jQuery to only trigger an action if the click occurred on either a .CollOpen or .CollClosed span (this technique is known as event delegation):
$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
// ...
});
Within the event handler, the context of `this` refers to the exact span that was clicked, allowing us to toggle classes and hide subsequent ul elements:
$(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
Putting it all together:
$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
$(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});
To illustrate further:
$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
$(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});.treeView {
-moz-user-select: none;
position: relative;
}
/* CSS styling continues... */
<ul class="treeView">
<li>
<span class="CollOpen">[*]</span><span>Collapsible lists</span>
<ul class="CollList">
<li>
<span class="CollClosed">[*]</span><span>Actions</span>
<ul class=" CollList" style="display: none;">
<li class="lastChild">
<span class="CollOpen">[*]</span><span>Actions</span>
<ul class="CollList" style="display: none;">
<li class="">Expanding/opening</li>
<li class="lastChild">Collapsing/closing</li>
</ul>
</li>
</ul>
</li>
<li class="lastChild">
<span class=" CollOpen">[*]</span><span>Actions</span>
<ul class="CollList" style="display: none;">
<li class="">Directory listings</li>
<li class="">Tree views</li>
<li class="lastChild">Outline views</li>
</ul>
</li>
</ul>
</li>
</ul>
It's worth noting that I've added [*] to the spans for better visibility and interaction. Alternatively, instead of toggling between .CollOpen and .CollClosed, consider rendering the elements consistently with a class on the li element to handle the open/close state. This can lead to more streamlined code management while maintaining a cohesive design across the spans within li elements.
if($(this).hasClass('CollOpen')
{
$(this).removeClass('CollOpen')
$(this).addClass('CollClosed')
}
else
{
$(this).removeClass('CollClosed')
$(this).addClass('CollOpen')
}
Kindly take note that there is an issue in your CSS
.treeView li.CollOpen{ background-image:url('');÷ }
Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...
I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...
Confirming that it is compatible for use with JQuery scripting. ...
I am using a comments.html child template with the following structure: <div class="commentsContainer"> {% for comment in comment_list %} ... {{ comment.text }} ... {% endfor %} </div> Whenever I click on a bu ...
I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...
I need help with transitioning the text-shadow color horizontally on hover. I found a solution that demonstrates how to do this here: Although it shouldn't matter, I am working in react with styled-components. Here is an example of what I am trying ...
I stumbled upon this helpful code snippet that calculates the frame rate for an animation I created. Can someone please explain how it works? Check out the code below: <script src="jquery.js"></script> window.countFPS = (function () { var ...
I am currently working on building a responsive website and I need two divs to switch positions depending on the screen width, both on initial load and when resizing. Despite my efforts in researching and trying various options, I have not been successful ...
Greetings everyone, I've run into a bit of a roadblock. My goal is to create a basic script that can count the number of servers currently running on this map by scraping the webpage, calculating the divs with the class ".row ark_srv1", and then displ ...
Hey there! I'm currently in the process of trying to remove a specific item from my array while working with Angular2 and Typescript. My goal is to identify the index based on the value provided. The array I am working with is initialized as follows. ...
After experimenting with applying the border-radius property to a div, I encountered an issue where the border radius only worked on one side when the radius value was too large. How can I resolve this problem while maintaining the border-radius value on a ...
My attempt to retrieve content from Wikipedia in JSON format has been unsuccessful: $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles="+title+"&format=json", function(data) { doSomethingWith ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbl" class="tbl1"> <tr> <th> mobileno </th> <td class='mo' id="mo_0"> </td> ...
Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...
I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...
As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...
Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...
Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...
How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...
Every time I try to delete the content by clicking on the delete button, it just doesn't work for me. I suspect there might be an issue with the ajax delete call. ajax-file.php $('.delete_update').on("click",function() { var I ...