<?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/fr/tags/toggle/</link><description>Recent content in Toggle on Martijn's Notes</description><generator>Hugo</generator><language>fr</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/fr/tags/toggle/index.xml" rel="self" type="application/rss+xml"/><item><title>Basculer</title><link>https://vandenboom.online/fr/docs/shortcodes/toggle/</link><pubDate>Sat, 21 Jan 2023 23:22:11 +0800</pubDate><guid>https://vandenboom.online/fr/docs/shortcodes/toggle/</guid><description><![CDATA[<p>Le shortcode <code>toggle</code> est similaire au <code>code-toggle</code>, mais il est plus générique.</p>
<!--plus-->

<h2 id="utilisation" data-numberify>Utilisation<a class="anchor ms-1" href="#utilisation"></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>Le <code>myToggleName</code> DOIT être unique par page.</li>
<li>Le <code>myToggleItemName</code> DOIT être unique par bascule.</li>
</ul>

<h2 id="exemple" data-numberify>Exemple<a class="anchor ms-1" href="#exemple"></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">
      
    Fou
  
    </div>
    <div
      class="tab-pane fade"
      id="toggle-foobar-Bar-tab-pane"
      role="tabpanel"
      aria-labelledby="toggle-foobar-Bar-tab"
      tabindex="0">
      
    Barre
  
    </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">faire</span> <span class="nx">écho</span> <span class="nx">à</span> <span class="s2">&#34;Bonjour tout le monde&#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;Bonjour tout le monde&#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="k">SELECT</span><span class="w"> </span><span class="s2">&#34;Bonjour tout le monde&#34;</span></span></span></code></pre></div>
  
    </div>
</div>]]></description></item></channel></rss>