Shortcode ein und ausblenden

(@miba65)

Hallo
Ich habe auf meiner Seite ein script erstellt um Texte ein und auszublenden solange ich
Texte oder Bilder verwende funktioniert das einwandfrei.

nun möchte ich aber Shortcods einbinden, die werden auch ausgegeben lassen sich aber nicht auszublenden.

was kann ich thun oder ist das überhaupt möglich?


<head>
    <script language="JavaScript" type="text/javascript">
     <!--
      function alleAusblenden(){
        var elemente = document.getElementById

("ebenen").getElementsByTagName("p");
        for (var i = 0; i < elemente.length; i++) {
          elemente[i].style.display = "none";
        }
      }    
      function einblenden(div){
        alleAusblenden()
        document.getElementById(div).style.display = 
"inline";
      }
      
      //-->
</script>

  </head>

<img class="alignnone wp-image-362 size-full" src="https://themes.woocommerce.com/galleria/wp-content/uploads/sites/101/2018/05/galleria-hero-compressor.png" alt="Banner" height="200" width=" 100%" />
<h3 style="Georgia, Times, serif; font-size: 26px; color: rgb(0, 57, 117); padding: 3px 0px; font-style: italic; text-align: center; width: 100%;">mit der Kraft der Natur</h3>
<h4 style="text-align: center; width: 100%;"><span style="color: #003975;">Filtern nach:</span></h4>
  <body>
<ul style="text-align: center;">
  <div id="ebenen">  
    <li style="display: inline;"><a href="#" onclick="einblenden('ebene2'); return false;"><button style="background-color: #003975; border: none; color: white; padding: 6px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;">Link 1</button></a></li> 

    <li style="display: inline;"><a href="#" onclick="einblenden('ebene3'); return false;"><button style="background-color: #003975; border: none; color: white; padding: 6px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;">Link 2</button></a></li>
          
    <li style="display: inline;"><a href="#" onclick="einblenden('ebene4'); return false;"><button style="background-color: #003975; border: none; color: white; padding: 6px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;">Link 3</button></a></li>
       
    <br/>
      
<table style="width: 100%">
	<tr>		
		<td>
			<p id="ebene2" >
        		[product_category category="Kategorie1"]  
      		</p>
			<p id="ebene3"  style="display:none;">
        		[product_category category="Unterkategorie1"]
     		 </p>
			<p id="ebene4"  style="display:none;">
       			 [product_category category="Unterkategorie1"]      
      		</p>
		</td>
	</tr>
</table>
</div>
</ul>
</body>

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)

Moderator Bego Mario Garde
(@pixolin)

vor 5 Jahren, 6 Monaten

Hallo @miba65 und willkommen im Forum,

Ich habe auf meiner Seite ein script erstellt um Texte ein und auszublenden …

wo hast du denn diesen Code hingepackt? In ein Template? In den visuellen Editor? Hast du dir mal im Quellcode angeschaut, ob das JavaScript auch tatsächlich als Script eingefügt wurde und die Tags nicht bereinigt wurden? (also z.B. statt <script> gerendert als & lt; script & gt;)
Thread-Starter miba65
(@miba65)

vor 5 Jahren, 6 Monaten
Hallo @Bergo Mario Grande,

den Code habe ich wie oben geposted in eine neue WP Seite gepackt.
er wurde unter Text eingegeben und gespeichert (mir ist bewusst das der Visuell Editor Tags ändert, aber das ist hier nicht der Fall).

Das Script läuft soweit gut, Bilder und Text werden ausgeblendet eben einfach Shortcodes lassen sich nicht ausblenden. (ebene2 und ebene3 funktionieren ebene4 funktioniert nicht und bleibt immer eingeblendet.

mir ist aber aufgefallen das wenn ich den Text in anfangs und end Tags (<p></p>) setze das er dann auch nicht ausgeblendet wird, nun meine Überlegung da ein Shortcode eine HTML Datei repräsentiert ist es vielleicht möglich das die anfangs und end Tags der dem Shortcode hinterlegten Datei das Problem verursacht und wäre es möglich das zu umgehen?
```
<table style="width: 100%">
	<tr>		
		<td>
			<p id="ebene2" >
        		<span style="color: #003975; font-size: 20px;">Das ist der Link 1</span>  
      		</p>
			<p id="ebene3"  style="display:none;">
        		<img class="alignnone wp-image-362 size-full" src="http://seite.de/wp-content/img//u_kat1.jpg" alt="Nahrung" width=" 100%" />
        		     		 </p>
			<p id="ebene4"  style="display:none;">
       			 [product_category category="Unterkategorie1"]      
      		</p>
		</td>
	</tr>
</table>
</div>
</ul>
</body>
```

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)

Das Thema „Shortcode ein und ausblenden“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten