I'm trying to resolve an issue involving nesting slideToggle() functions within each other and using flex-grids. Any suggestions on how to tackle this problem?

After running the code snippet, you may notice that the output appears to be a bit glitchy.

I've been grappling with this issue for the past 48 hours and have yet to find a resolution that works effectively.

I've attempted various solutions from the community here on Stack Overflow, but none of them seem to hit the mark. The scenario involves a Parent, Child1....n, and Grandchild1....n relationship. When clicking on the parent, all children should expand, and each child click should reveal their respective grandchildren.

While my code somewhat achieves this functionality, it lacks visual appeal.

PS: I'm not a professional web developer, and this task was assigned to me by my boss, making this whole experience completely new territory for me.

Thank you all in advance, and I sincerely hope this question doesn't cause any inconvenience to anyone.

javascripthtmljquerycss

Answer №1

Congratulations on your achievement, even though you're not a developer, you have done an excellent job

If I understand your issue correctly,

Firstly, in the HTML code, you need to move the id #infrtranspUL from the li to the child .fa-book div element,

then correct your condition for showing the li child

from

if ($("#infrtranspFORM").css("display", "none")) {
  $("#infrtranspFORM").css("display", "none");
} else {
  $("#infrtranspFORM").slideToggle(1000, "linear");
}

to

if (!($("#infrtranspFORM").css("display") === "none")) {
  $("#infrtranspUL").toggleClass('fa-book fa-book-open');
  $("#infrtranspFORM").slideToggle(1000, "linear");
}

And now it should work:

See below snippet :

$(document).ready(function() {
  $("#infrtransp").click(function() {
    $("#infrtranspUL").parents("li").slideToggle(1000, "linear");
    $("#infrtransp").toggleClass('fa-book fa-book-open');
    
    if (!($("#infrtranspFORM").css("display") === "none")) {
      $("#infrtranspUL").toggleClass('fa-book fa-book-open');
      $("#infrtranspFORM").slideToggle(1000, "linear");
    }


  });
  $("#infrtranspUL").click(function() {
    $("#infrtranspFORM").slideToggle(1000, "linear");
    $("#infrtranspUL").toggleClass('fa-book fa-book-open');
  });

});
.flex-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eceef1;
  border-radius: 10px;
  font-size: 15px;
  -webkit-box-shadow: 0px 0px 7px 1px #ccc;
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 7px 1px #ccc;
  /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 7px 1px #ccc;
}

.flex-grid .col2 {
  flex: 1;
}

.flex-grid {
  margin: 0 0 20px 0;
}

.col1 {
  background: #eceef1;
  padding: 20px;
  margin-left: 20px;
  font-size: 15px;
  color: #43597c;
}

.col2 {
  background: #eceef1;
  padding: 20px;
  padding-left: 20px;
  color: #43597c;
  text-align: justify;
}

.col3 {
  background: #eceef1;
  padding: 20px;
  font-size: 25px;
  color: #0074db;
}

.col4 {
  background: #eceef1;
  padding: 20px;
  font-size: 25px;
  color: #0074db;
}

@keyframes slideIn {
  0% {
    transform: translateX(0);
    opacity: 0.2;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.maindiv {
  animation: 1s ease-out 0s 1 slideIn;
  height: 1000px;
  overflow: scroll;
  padding: 10px;
}

ul,
li {
  padding-top: 10px;
  margin-bottom: 1px;
  margin-top: -10px;
  padding-right: 5px;
}

#infrtransp:hover,
#infrtranspUL:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
  <div class="flex-grid">
    <div class="fas fa-book col1" id="infrtransp"></div>
    <div class="col2">
      <b>Infrastructură de transport</b>
      <br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
    </div>
  </div>
  <ul style="list-style-type: none;">
    <li style="display: none; padding-left: 20px;">
      <div class="flex-grid">
        <div class="fas fa-book col1" id="infrtranspUL"></div>
        <div class="col2"><b>AndConsult</b>
          <br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
        </div>
      </div>
    </li>
    <ul>
      <li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
        <div class="flex-grid">
          <div class="fas fa-file col1"></div>
          <div class="col2">Formular - AndConsult
            <br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
          </div>
          <a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
            <div class="fas fa-eye col3"></div>
          </a>
          <a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
            <div class="fas fa-download col4"></div>
          </a>
        </div>
      </li>
    </ul>
  </ul>
</div>

Answer №2

It's not entirely clear what you're looking for, but Font Awesome uses <i> tags, so you might want to stick with them for better code readability and to avoid confusion.

To toggle a class (for an icon) on an element that doesn't initially have it: 

$("#infrtranspUL").toggleClass('fa-book fa-book-open');
, you can update the selector to 
$("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
.

The combination of height and overflow doesn't seem necessary in this context.

Possible outcome you may expect:

$(document).ready(function() {
  $("#infrtransp").click(function() {
    $("#infrtranspUL").slideToggle(1000, "linear");
    $("#infrtransp ").toggleClass('fa-book fa-book-open');
    if ($("#infrtranspFORM").css("display", "none")) {
      $("#infrtranspFORM").css("display", "none");
    } else {
      $("#infrtranspFORM").slideToggle(1000, "linear");
    }
  });
  
  $("#infrtranspUL").click(function() {
    $("#infrtranspFORM").slideToggle(1000, "linear");
    $("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
  });

  $("#infrtransp").mouseover(function() {
    jQuery('#infrtransp').css('cursor', 'pointer');
  });
  
  $("#infrtranspUL").mouseover(function() {
    jQuery('#infrtranspUL').css('cursor', 'pointer');
  });
});

.flex-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eceef1;
  border-radius: 10px;
  font-size: 15px;
  -webkit-box-shadow: 0px 0px 7px 1px #ccc;
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 7px 1px #ccc;
  /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 7px 1px #ccc;
}

.flex-grid .col2 {
  flex: 1;
}

.flex-grid {
  margin: 0 0 20px 0;
}

.col1 {
  background: #eceef1;
  padding: 20px;
  margin-left: 20px;
  font-size: 15px;
  color: #43597c;
}

(col omitted due to character limit)
          
  </a>
</div>

<ul>,
li {
  padding-top: 10px;
  margin-bottom: 1px;
  margin-top: -10px;
  padding-right: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "maindiv">
  <div class="flex-grid">
    <div class="fa fa-book col1" id="infrtransp"></div>
    <div class="col2">
      <b>Infrastructură de transport</b>
      <br>(Click on <span class="fas fa-book"></span> to view companies)
    </div>
  </div>

  <ul style="list-style-type: none;">
    <li style="display: none; padding-left: 20px;" id="infrtranspUL">
      <div class="flex-grid">
        <i class="fa fa-book col1"></i>
        <div class="col2"><b>AndConsult</b>
          <br>(Click on <i class="fas fa-book"></i> to view the form)
        </div>
      </div>
    </li>
    <ul>
      <li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
        <div class="flex-grid">
          <i class="fas fa-file col1"></i>
          <div class="col2">Form - AndConsult
            <br>(Click on <i class="fas fa-book"></i> to view or download the form)
          </div>
          <a href="https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
            <i class="fas fa-eye col3"></i>
          </a>
          <a download href="https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
            <i class="fas fa-download col4"></i>
          </a>
        </div>
      </li>
    </ul>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming AJAX into jQuery

How can I rewrite the following code using only the jQuery library? <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function do_it(value) { var url = "test.p ...

jqueryajax

Incorporate JSON data into a subsequent AJAX call when coding in JavaScript

I am facing an issue where I need to use data returned from an ajax request to construct a string and then post it back using ajax. However, the variable I'm assigning the data to is not within the scope of the second request, resulting in a 'var ...

javascriptjqueryajaxjson

The custom hook designed to clear and update time is not functioning as anticipated

After setting the default time using setInterval, it seems to be creating a new instance instead of updating as expected. How can I clear the existing setInterval in the custom hook and set a new value? app.jsx import React from 'react'; import ...

javascriptreactjsreact-hooks

Navigating through states in AngularJS

My application has three states: app, app.devices, and app.devices.device. While the first two states are functioning properly, the app.devices.device state is not working as expected. Here is the code for reference: http://pastebin.com/r1kYuExp http://pa ...

javascriptangularjs

Error: The 'filename' property of undefined cannot be read when attempting to upload a user profile photo using multer

I am facing an issue while attempting to upload a user profile photo using express.js server and Multer. I keep receiving the error message "TypeError: Cannot read property 'filename' of undefined." Below is the code snippets for both the server- ...

javascriptnode.jsrestexpressmulter

Leveraging an array of Elasticsearch documents using AngularJS

The query results are given below... { "took": 6, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 45, "max_score": 0, "hits": [] }, "aggregations": { ...

htmlarraysangularjselasticsearchiteration

SVG tags are not functioning properly

Hello, I am new to working with SVG files. I have a set of icons created using SVG and I am attempting to use the <use> tag in order to display a specific part of an SVG file. However, I seem to be encountering some issues and I am unable to identi ...

javascripthtmlcsssvg

Are your Express routes failing to function properly?

I recently embarked on creating a new Express app by following the tutorial from Code Magazine. Below are my app and the defined route for /img. https://i.sstatic.net/G6PUG.png Upon trying to access http://localhost:3000/img or http://localhost:3000/img/ ...

javascriptnode.jsexpress

What is the best way to clear a THREE.JS scene?

I am exploring methods to remove all objects from a scene without affecting the scene structure. I understand that naming each object individually allows for selective deletion by name. But, I am searching for a fast approach to clear a scene of all obje ...

javascriptthree.js

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

javascriptjqueryhtmlcss

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss

Tutorial on implementing an AJAX save button featuring a loading GIF in CKEditor version 4.2.1. [Interactive Plugin Demo Included]

Sharing this post as a helpful guide for anyone looking to display a save icon in ckeditor for normal and inline-editing mode. After struggling to find a working save plugin for ckeditor 4.2.1, I took matters into my own hands and created my own. In my res ...

jqueryajaxsaveckeditor

Input fields are not being displayed in the Django form

I've been struggling with resolving this issue using chat GPT for quite some time now. It keeps indicating that everything is fine, but it's clearly not working as expected. At the moment, I am focusing on fixing the email field first before proc ...

pythonhtmldjango

Ways to determine if a scrollbar is visible in a browser while using reactjs

Currently, I am developing a React project and encountering an issue where a scroll bar appears in the browser when decreasing the screen size from large to tiny. As a result, my test cases are failing. I would like to know if there is a way to determine ...

javascriptreactjsscrollbar

Activate jquery script upon initial page load, and refrain from doing so thereafter for that specific user

Recently, I integrated a jQuery Modal Window script into my website from Currently, the Modal Window is triggered when a user clicks on a link. However, I am looking to customize it so that it automatically opens upon the initial page load but does not ac ...

jquery

Exploring the difference between reversing elements into a new array versus reversing them in

Recently, I've been experimenting with two methods to reverse an array. Firstly, I tried using the push method to create a new array. Secondly, I attempted using destructuring to mutate the original array. I'm curious about which of these techni ...

javascriptarraysfor-loopreversing

JQuery Draggable Library

Is there a way to dynamically change the ID of a div element when dragging stops using JQuery? ...

jqueryjquery-ui

Verify if data already exists in an HTML table column using JavaScript

As a beginner in web programming, I am currently trying to dynamically add data to a table. But before inserting the data into the table, my requirement is to first verify if the data already exists in a specific column, such as the name column. function ...

javascripthtmljquery

Executing a JavaScript function with jQuery

function launch() { $("p").text("Hey there", greet()); } function greet() { alert("Greetings! You have triggered another function"); } HTML: <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button onclic ...

javascriptjqueryfunctioncall

Failed attempt to register on localhost through Facebook

I have been attempting to implement the Facebook registration plugin on my localhost, but unfortunately, the registration box is not appearing as expected. Below are some screenshots for reference: Here is the code snippet I have used: <!DOCTYPE html ...

javascriptphpfacebooklaravellocalhost