Skip to content

Is there a way to fix this problem of a slideToggle() inside a slideToggle() inside a slideToggle() while using flex-grids?

Bourbia Brahim
user3069396

If you run the code snippet, you’ll see that the output is kind of “bugged”.

I have been stuck on this for the past 2 days and can’t seem to make it work at all.

I tried several solutions found here on stack, but none seem to do it for me. Basically there is Parent, Child1….n, and Grandchild1….n. Whenever i click on the parent, the list with all children should open. And for every child i click, the list with all grandchildren should open.

My code kinda does that, but not in a visually pleasant way.

PS: I am not a web developer and this whole thing is a request from my boss so everything is in fact new for me.

Thank you all and hope this question does not upset anyone.

$(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").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;
}

.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;
}
<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;" id="infrtranspUL">
      <div class="flex-grid">
        <div class="fas fa-book col1"></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>

Advertisement

Answer

First I congratulate you , despite you’re not a developer , you did a great work

If I could understand you issue ,

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

then your condition of showing li child was wrong replace it ony

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>
Bourbia Brahim
User contributions licensed under: CC BY-SA
4 People found this is helpful