toggle-drop.html

  <style>
    .catalog-list {
      font-family: Arial;
      float: left;
      width: 33%;
      list-style: none;
      padding: 0;
      margin: 20px 0 35px;
      padding-left: 65px;
      position: relative;
    }
    .catalog-list li {
      margin-bottom: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .catalog-list li a {
      color: #222222;
      text-decoration: none;
    }
    .catalog-list li a:hover {
      text-decoration: underline;
    }
    .catalog-ico {
      display: flex;
      float: left;
      position: absolute;
      top: -10px;
      left: 0px;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-color: #FFE82C;
    }
    .toggle-drop a {
      color: #999999!important;
      border-bottom: 1px dashed #999999;
      text-decoration: none !important;
      cursor: pointer;
    }
    .arrow-up:before {
      transform: rotate(-90deg) !important;
      margin-right: 8px !important;
    }
    .arrow-down:before{
      content: "\276f";
      color: #999999;
      font-size: 10px;
      transform: rotate(90deg);
      margin-right: 6px;
    }

    .catalog-list-title {
      font-size: 16px;
      font-weight: bold;
    }

    .catalog-block {
      display: flex;
      flex-wrap: wrap;
    }

    .panel {
      display: none;
    }
  </style>
<ul class="catalog-list">
        <li><a href="#"><span class="catalog-ico"><img src="drell.jpg" alt=""></span><span class="catalog-list-title">Электроинструмент</span></a></li>
        <li><a href="#">Дрели сетевые</a></li>
        <li><a href="#">Измерительное оборудование</a></li>
        <li><a href="#">Отрезные и шлифовальные машины</a></li>
        <li><a href="#">Перфораторы и отбойные молотки</a></li>
        <li><a href="#">Пилы и лобзики</a></li>
        <li><a href="#">Полировальные и шлифовальные машины</a></li>
        <span class="panel" id="open_3">
        <li><a href="#">текст7</a></li>
        <li><a href="#">текст8</a></li>
        <li><a href="#">текст9</a></li>
        <li><a href="#">текст10</a></li>
        </span>
        <li class="toggle-drop arrow-down" data-open="open_3"><a>Весь список</a></li>
      </ul>
    $("li.toggle-drop").click(function() {
      var click_id = $(this).data("open");
      $("#" + click_id).toggle();
      $(this).toggleClass("arrow-up");
    })