Elementor-Anleitung: Erstellen eines schnellen Filters für Blog-Beiträge mit CSS und JS

By Tim ChristophersenElementor, Anleitungen

Elementor-Anleitung: Erstellen eines schnellen Filters für Blog-Beiträge mit CSS und JS

Schritt 1: Erstellen des Elementor-Elements

Erstellen Sie die Buttons, die verwendet werden sollen, um zwischen den verschiedenen Ergebnissen zu wechseln. Vergeben Sie diesen Buttons die Klasse „btn“ und eine individuelle ID, wie z.B. „btn-1“. Verwenden Sie dazu Elementor, indem Sie ein neues Widget hinzufügen und das Widget „Button“ auswählen. In den Einstellungen des Widgets können Sie die Klasse und die ID des Buttons festlegen.

In unserem Beispiel erstellen wir zwei Buttons mit den IDs „btn-1“ und „btn-2“ und den Klassen „btn“

Schritt 2: Hinzufügen der Blöcke

Erstellen Sie die Blöcke, die die verschiedenen Ergebnisse anzeigen sollen. Vergeben Sie diesen Blöcken die Klasse „block“ und eine individuelle ID, wie z.B. „block-1“. Verwenden Sie dazu Elementor, indem Sie ein neues Widget hinzufügen und das Widget „Text-Editor“ auswählen. In den Einstellungen des Widgets können Sie die Klasse und die ID des Blocks festlegen.

In unserem Beispiel erstellen wir zwei Blöcke mit den IDs „block-1“ und „block-2“ und den Klassen „block“

Schritt 3: Hinzufügen von CSS

Fügen Sie das folgende CSS zu Ihrem Stylesheet hinzu:

.block { display: none; } 

.active { display: block; }

Dieses CSS versteckt alle Blöcke, die die Klasse „block“ haben, und zeigt nur den Block an, der die Klasse „active“ hat.

Schritt 4: Hinzufügen des JavaScript-Codes

Kopieren Sie den folgenden JavaScript-Code und fügen Sie ihn in das JavaScript-Widget von Elementor ein:

<script type="text/javascript"> 

window.onload = function() { 

// Get all the buttons with class "btn"

const buttons = document.getElementsByClassName('btn'); 

// Get all the blocks with class "block" 

const blocks = document.getElementsByClassName('block'); 

// Add the "active" class to the first block by default

blocks[0].classList.add('active');

// Loop through each button and add a click event listener 

for (let i = 0; i < buttons.length; i++) { 

buttons[i].addEventListener('click', () => { 

// Get the ID of the button clicked 

const buttonId = buttons[i].getAttribute('id'); 

// Get the block element corresponding to the button ID 

let block; for (let j = 0; j < blocks.length; j++) { 

if (blocks[j].getAttribute('id') === 'block-' + buttonId.split('-')[1]) { 

block = blocks[j]; break; } } 

// Remove the "active" class from all blocks 

for (let j = 0; j < blocks.length; j++) { 

blocks[j].classList.remove('active'); 

} 

// Add the "active" class to the block corresponding to the button clicked 

if (block) { block.classList.add('active');

 } }); } }; 

</script>

Der Code funktioniert, indem er alle Buttons mit der Klasse „btn“ und alle Blöcke mit der Klasse „block“ auswählt. Dann fügt er jedem Button einen Klick-Event-Listener hinzu, der bei einem Klick auf den Button ausgeführt wird. Wenn der Button geklickt wird, wird die ID des Buttons ausgelesen und der zugehörige Block wird angezeigt, indem die Klasse „active“ hinzugefügt wird und alle anderen Blöcke ausgeblendet werden.

Schritt 5: Anpassen der IDs

Passen Sie die IDs der Buttons und Blöcke im HTML und JavaScript-Code an, um sicherzustellen, dass sie mit den IDs übereinstimmen, die Sie in Schritt 1 und 2 festgelegt haben.

Jetzt sollten Sie in der Lage sein, zwischen den verschiedenen Ergebnissen zu wechseln, indem Sie auf die Buttons klicken, ohne eine neue Seite zu laden.