<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Toggle on Martijn's Notes</title><link>https://vandenboom.online/es/tags/toggle/</link><description>Recent content in Toggle on Martijn's Notes</description><generator>Hugo</generator><language>es</language><copyright>Copyright © 2016-2026 van den &lt;span class='bold-rotate'&gt;B&lt;/span&gt;oom. All Rights Reserved.</copyright><lastBuildDate>Sat, 21 Jan 2023 23:22:11 +0800</lastBuildDate><atom:link href="https://vandenboom.online/es/tags/toggle/index.xml" rel="self" type="application/rss+xml"/><item><title>Palanca</title><link>https://vandenboom.online/es/docs/shortcodes/toggle/</link><pubDate>Sat, 21 Jan 2023 23:22:11 +0800</pubDate><guid>https://vandenboom.online/es/docs/shortcodes/toggle/</guid><description><![CDATA[<p>El código corto <code>toggle</code> es similar al <code>code-toggle</code>, pero es más genérico.</p>
<!--más-->

<h2 id="uso" data-numberify>Uso<a class="anchor ms-1" href="#uso"></a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="ln">1</span><span class="cl">{{&lt; toggle myToggleName &gt;}}
</span></span><span class="line"><span class="ln">2</span><span class="cl">  
</span></span><span class="line"><span class="ln">3</span><span class="cl">  {{&lt; toggle-item myToggleItemName &gt;}}
</span></span><span class="line"><span class="ln">4</span><span class="cl">    CONTENT HERE, MARKDOWN and SHORTCODE are support.
</span></span><span class="line"><span class="ln">5</span><span class="cl">  {{&lt; /toggle-item &gt;}}
</span></span><span class="line"><span class="ln">6</span><span class="cl">
</span></span><span class="line"><span class="ln">7</span><span class="cl">  ...
</span></span><span class="line"><span class="ln">8</span><span class="cl">
</span></span><span class="line"><span class="ln">9</span><span class="cl">{{&lt; /toggle &gt;}}
</span></span></code></pre></div><ul>
<li>El <code>myToggleName</code> DEBE ser único por página.</li>
<li>El <code>myToggleItemName</code> DEBE ser único por palanca.</li>
</ul>

<h2 id="ejemplo" data-numberify>Ejemplo<a class="anchor ms-1" href="#ejemplo"></a></h2>

<ul class="nav nav-tabs toggle" id="toggle-foobar" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link active"
        id="toggle-foobar-Foo-tab"
        data-bs-toggle="tab"
        data-bs-target="#toggle-foobar-Foo-tab-pane"
        type="button"
        role="tab"
        aria-controls="toggle-foobar-Foo-tab-pane"
        aria-selected="true">
        Foo
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        id="toggle-foobar-Bar-tab"
        data-bs-toggle="tab"
        data-bs-target="#toggle-foobar-Bar-tab-pane"
        type="button"
        role="tab"
        aria-controls="toggle-foobar-Bar-tab-pane"
        aria-selected="false">
        Bar
      </button>
    </li>
</ul>
<div class="tab-content mb-3" id="toggle-foobar-content">
    <div
      class="tab-pane fade show active"
      id="toggle-foobar-Foo-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-foobar-Foo-tab"
      tabindex="0">
      
    foo
  
    </div>
    <div
      class="tab-pane fade"
      id="toggle-foobar-Bar-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-foobar-Bar-tab"
      tabindex="0">
      
    barra
  
    </div>
</div>



<ul class="nav nav-tabs toggle" id="toggle-languages" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link active"
        id="toggle-languages-PHP-tab"
        data-bs-toggle="tab"
        data-bs-target="#toggle-languages-PHP-tab-pane"
        type="button"
        role="tab"
        aria-controls="toggle-languages-PHP-tab-pane"
        aria-selected="true">
        PHP
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        id="toggle-languages-JS-tab"
        data-bs-toggle="tab"
        data-bs-target="#toggle-languages-JS-tab-pane"
        type="button"
        role="tab"
        aria-controls="toggle-languages-JS-tab-pane"
        aria-selected="false">
        JS
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        id="toggle-languages-SQL-tab"
        data-bs-toggle="tab"
        data-bs-target="#toggle-languages-SQL-tab-pane"
        type="button"
        role="tab"
        aria-controls="toggle-languages-SQL-tab-pane"
        aria-selected="false">
        SQL
      </button>
    </li>
</ul>
<div class="tab-content mb-3" id="toggle-languages-content">
    <div
      class="tab-pane fade show active"
      id="toggle-languages-PHP-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-languages-PHP-tab"
      tabindex="0">
      
    <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-php" data-lang="php"><span class="line"><span class="ln">1</span><span class="cl"><span class="nx">eco</span> <span class="s2">&#34;hola mundo&#34;</span></span></span></code></pre></div>
  
    </div>
    <div
      class="tab-pane fade"
      id="toggle-languages-JS-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-languages-JS-tab"
      tabindex="0">
      
    <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="ln">1</span><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;hola mundo&#34;</span><span class="p">)</span></span></span></code></pre></div>
  
    </div>
    <div
      class="tab-pane fade"
      id="toggle-languages-SQL-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-languages-SQL-tab"
      tabindex="0">
      
    <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sql" data-lang="sql"><span class="line"><span class="ln">1</span><span class="cl"><span class="n">SELECCIONA</span><span class="w"> </span><span class="s2">&#34;hola mundo&#34;</span></span></span></code></pre></div>
  
    </div>
</div>]]></description></item></channel></rss>