Легенда групп

[Dusty]

Всем снова здравствуйте и всех с новым годом Вижу на многих форумах(под спойлером) фишку к группе легенд там есть подгруппы через кнопку Вот возник вопрос как это реализовать без плагина и добавить его в свой код?

Спойлер

 

[Dusty]

Я разобрался сам можно закрыть тему

[HooLIGUN]

2 часа назад, Dusty сказал:

Я разобрался сам можно закрыть тему

Расскажи 

[Dusty]

19 часов назад, HooLIGUN сказал:

Расскажи 

Примерно так Добавляешь туда куда тебе нужен этот код  (Взял пример кода с одного форума)

Спойлер

- Свой div class прописываешь там где хочешь сделать. 

<ul class="acekill_legend_list" style="list-style-type: none; padding-left: 5px;">

      <li onclick="showPopup('Legend_ServersOwner');">
        <span style="color: #e41f00;font-weight: 600; text-align: left;">
          <i class="fas fa-stream" aria-hidden="true"></i> Owners
          <i class="fa fa-caret-down" aria-hidden="true"></i>
        </span>

        <div id="Legend_ServersOwner" class="dropdown-content popupContent">
          <span class="popuplegendtext" id="myPopup">
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=30" style="color: #e41f00;font-weight: 600;">
              <i class="fas fa-stream" aria-hidden="true"></i> Owner AWP
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=33" style="color: #e41f00;font-weight: 600;">
              <i class="fas fa-stream" aria-hidden="true"></i> Owner FFA
            </a>
          </span>
        </div>
      </li>

      <li onclick="showPopup('Legend_Guardians');">
        <span style="color: #e45200;font-weight:bold;">
          <i class="fas fa-layer-group" aria-hidden="true"></i> Guardians
          <i class="fa fa-caret-down" aria-hidden="true"></i>
        </span>

        <div id="Legend_Guardians" class="dropdown-content popupContent">
          <span class="popuplegendtext">
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=12" style="color: #e45200;font-weight:bold;">
              <i class="fas fa-layer-group" aria-hidden="true"></i> Guardian CSGO AIM
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=11" style="color: #e45200;font-weight:bold;">
              <i class="fas fa-layer-group" aria-hidden="true"></i> Guardian CSGO AWP
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=22" style="color: #e45200;font-weight:bold;">
              <i class="fas fa-layer-group" aria-hidden="true"></i> Guardian CSGO 5vs5 MIRAGE
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=34" style="color: #e45200;font-weight:bold;">
              <i class="fas fa-layer-group" aria-hidden="true"></i> Guardian CSGO FFA
            </a>
          </span>
        </div>
      </li>

      <li onclick="showPopup('Legend_Admins');">
        <span style="color: #e4874e;font-weight:bold;">
          <i class="fab fa-steam-symbol" aria-hidden="true"></i> Admins
          <i class="fa fa-caret-down" aria-hidden="true"></i>
        </span>
        <div id="Legend_Admins" class="dropdown-content popupContent">
          <span class="popuplegendtext">
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=9" style="color: #e4874e;font-weight:bold;">
              <i class="fab fa-steam-symbol" aria-hidden="true"></i> Admin CSGO AIM
             </a>
             <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=9" style="color: #e4874e;font-weight:bold;">
              <i class="fab fa-steam-symbol" aria-hidden="true"></i> Admin CSGO AWP
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=18" style="color: #e4874e;font-weight:bold;">
              <i class="fab fa-steam-symbol" aria-hidden="true"></i> Admin CSGO 5vs5 MIRAGE
            </a>
            <a href="https://forum.acekill.pl/index.php?action=viewgroups&amp;gid=35" style="color: #e4874e;font-weight:bold;">
              <i class="fab fa-steam-symbol" aria-hidden="true"></i> Admin CSGO FFA
            </a>
          </span>
        </div>
      </li>
    </ul>

После чего добавил скрипт в globalTemplate

Спойлер

   <script>
    function showPopup(id) {
        removePopups();
        event.stopPropagation();
        document.getElementById( id ).classList.toggle("popupShow");
    }

    window.onclick = function(event) {
        removePopups();
    }

    function removePopups () {
        var dropdowns = document.getElementsByClassName("popupContent");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('popupShow')) {
            openDropdown.classList.remove('popupShow');
          }
        }
    }
</script>

После чего добавил в CSS этот код 

Спойлер

.dropdown-content.popupShow {
    display: block;
}
.popupShow {
    display: block;
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 300px;
    overflow: auto;
    z-index: 99999;
    top: 55px;
    right: 0px;
    background: rgba(17,17,21,0.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur( 4px );
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 5px;
}

В этого поучилось то что нужно было мне 

Спойлер

А дальше нужно менять свой CSS так как ты хочешь.