AGs/Sport

Dummy

Fußball

Basketball

Volleyball

Dummy

Oberer Banner wird in eigenem HTML Block definiert. Einzelne HTML-Blöcke sind hier durch Striche getrennt.
Der Code brauch kein CSS mehr, da ich das CSS bereits im "Zusätzlichen CSS" des Themes definiert habe. Angepasst sollten später allerdings die IDs, für individuelle Bearbeitung und die Texte wie Titel oder Beschreibungen.

-----------------------------------------------------------------------





<div class="ags-category-b" id="Dummy" style="background: #4e5263" onclick="window.open(&quot;https://dummy.com&quot;, &quot;_self&quot;);">
        <svg xmlns="http://www.w3.org/2000/svg" width="330.065" height="206.17" viewBox="0 0 330.065 206.17" fill="#26313d">
          <path id="Pfad_143" data-name="Pfad 143" d="M1501.592,642.688c-55.618,0-48.116,84.146-143.392,93.2-50.4,4.789-109.12,34-145.264,60.614-32.686,24.067-41.409,52.291-41.409,52.291l330.065.065Z" transform="translate(-1171.527 -642.688)"></path>
        </svg>

        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="57" height="102.857" viewBox="0 0 73.579 132.775" fill="#fff">
            <g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-333.261 -59.224)">
              <g id="Gruppe_39" data-name="Gruppe 39" transform="translate(333.261 59.224)">
                <path id="Pfad_142" data-name="Pfad 142" d="M406.84,97.879a38.251,38.251,0,0,1-6.954,22.073,39.068,39.068,0,0,1-18.536,14.239v7.26a12.858,12.858,0,0,1-25.716,0V124.841a14.154,14.154,0,0,1,13.847-14.133,12.915,12.915,0,1,0-12.361-19.473,12.866,12.866,0,0,1-22.182-.419,12.637,12.637,0,0,1,.18-12.886,38.646,38.646,0,0,1,71.694,18.417C406.833,96.857,406.84,97.371,406.84,97.879Z" transform="translate(-333.261 -59.224)"></path>
              </g>
              <rect id="Rechteck_98" data-name="Rechteck 98" width="25.716" height="25.716" rx="12.858" transform="translate(355.635 166.283)"></rect>
            </g>
          </svg>

          <h1>Dummy</h1>
        </div>
    </div>



-----------------------------------------------------------------------

<div class="ag-dropdowns">     

     <div class="ag" id="ag-dummy">
        <div class="ag-title">
          <h1>Dummy</h1>
          <svg xmlns="http://www.w3.org/2000/svg" class="ag-dropdown-arrow" width="21.984" height="13.114" viewBox="0 0 21.984 13.114" stroke="#181818">
            <path id="Pfad_139" data-name="Pfad 139" d="M0,0,6.621,6.621l3.311,3.31L19.863,0" transform="translate(1.061 1.061)" fill="none" stroke-width="3"/>
          </svg>
        </div>

        <div class="ag-content" style="display: none">
          <div class="">
            <p class="ag-question">Wann?</p>
            <p class="ag-answer">Nicht definiert</p>
          </div>
          <div class="">
            <p class="ag-question">Wo?</p>
            <p class="ag-answer">Nicht definiert</p>
          </div>
          <div class="">
            <p class="ag-question">Wer?</p>
            <p class="ag-answer">Nicht definiert</p>
          </div>
        </div>
      </div>
     
    <!-- weitere Dropdowns hier hinzufügen -->

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".ag").click(function() {
  if (!$(this).children(".ag-content").is(':visible')) {
    $(this).children(".ag-content").css("display","flex");
    $(this).css("height","auto");
    $(this).css("background","#181818");
    $(this).children(".ag-title").children("h1").css("color","#fff");
    $(this).children(".ag-title").children(".ag-dropdown-arrow").css("stroke","#fff");
    $(this).children(".ag-title").children(".ag-dropdown-arrow").css("transform","rotate(0deg)");
  } else if ($(this).children(".ag-content").is(':visible')) {
    $(this).children(".ag-content").css("display","none");
    $(this).css("height","60px");
    $(this).css("background","#fff");
    $(this).children(".ag-title").children("h1").css("color","#181818");
    $(this).children(".ag-title").children(".ag-dropdown-arrow").css("stroke","#181818");
    $(this).children(".ag-title").children(".ag-dropdown-arrow").css("transform","rotate(90deg)");
  }
});
</script>