Lassen Sie Besucher eine Art von Inhalt anzeigen / verbergen

Ich habe drei verschiedene Level in den Artikeln Level1, Level2 und Level3. Im Hauptbereich meiner Homepage zeige ich alle drei Arten von Artikeln, aber ich möchte, dass der Benutzer Level3-Artikel ausblenden / entfernen kann.

Die Levels werden in der database als Metawert gespeichert. Jeder Beitrag erhielt sein Niveau als class;

Also zu der Frage: Wie kann ich Besucher dazu bringen, die Level3-Artikel ein- oder auszublenden? Vorzugsweise ohne die Seite neu zu laden. Vielleicht eine einfache display:none , aber ich weiß nicht, wie ich das machen soll.

Vielen Dank!

Solutions Collecting From Web of "Lassen Sie Besucher eine Art von Inhalt anzeigen / verbergen"

JavaScript ist dein Freund! Genauer gesagt ist jQuery dein Freund.

Sie können uns ein Skript in die Warteschlange stellen und so etwas tun:

Fügen Sie dies Ihren functions.php hinzu

 < ?php function my_scripts_method() { wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'my_scripts_method'); // ?> 

Dann entweder in Ihrer Kopfzeile oder indem Sie eine benutzerdefinierte .js-Datei schreiben und dann nachfragen, verwenden Sie Folgendes

 jQuery(document).ready(function($) { $('.hide_level3_button').click(function(){ $('.Level3').toggle(); return false; }); }); 

Dann geben Sie Ihrem Toggle-Button eine class von hide_level3_button und Sie können hide_level3_button .

JS Fiddle: http://jsfiddle.net/BandonRandon/nzE7F/

UPDATE: Du kannst auch fadeToggle() benutzen, um sie zu verändern, was vielleicht besser aussieht http://jsfiddle.net/BandonRandon/nzE7F/1/

BEARBEITEN Um hinzuzufügen, dass es beim Laden der Seite funktioniert, würde ich das jQuery-Cookie-Plugin hinzufügen und das Javascript folgendermaßen ändern:

  jQuery(document).ready(function($) { if ($.cookie("hide_level3") == "true") { //check for cookie $('.Level3').hide(); //hide the level } $('.hide_level3_button').click(function() { $('.Level3').fadeToggle(); //toggle level $.cookie('hide_level3', 'true'); //set the cookie return false; }); }); 

http://jsfiddle.net/BandonRandon/nzE7F/3/