Jump to content

Template:Infobox What Do I Want: Difference between revisions

An idea by Jeff Lawlor
Created on 2025-04-17
No edit summary
No edit summary
Line 1: Line 1:
{| class="infobox"
<div class="infobox-idea">
|-
  <figure class="infobox-image">
! colspan="2" | What Do I Want?
    [[File:What Do I Want.png|center|300px]]
|-
  </figure>
| [[File:What Do I Want.png|300px]]
 
|-
  <div class="infobox-meta">
| Creative input on the Auto-Play feature
    <div class="infobox-user">
|-
      <div class="user-avatar">
| Input on making other gameplay faster
        [[File:{{{userimage|Placeholder.png}}}|40px|link=]]
|}
      </div>
      <div class="user-name">{{{username|Anonymous}}}</div>
    </div>
    <div class="infobox-actions">
      <button class="infobox-tab" data-tab="about-me">About Me</button>
      <button class="infobox-tab" data-tab="about-idea">About My Idea</button>
    </div>
  </div>
 
  <div class="infobox-panel about-me active">
    <div class="panel-content short">{{{aboutme|}}}</div>
    <div class="panel-content full" style="display:none;">{{{aboutme|}}}</div>
    <button class="show-more" onclick="this.previousElementSibling.style.display='block'; this.style.display='none';">Show More</button>
  </div>
 
  <div class="infobox-panel about-idea" style="display:none;">
    {{{aboutidea|}}}
  </div>
 
  <div class="infobox-note">
    I give this idea away freely. Here's what I'd like if you decide to make my idea come true, though you're under no obligation
  </div>
 
  <ul class="infobox-list">
    {{#if:{{{point1|}}}|<li>{{{point1}}}</li>|}}
    {{#if:{{{point2|}}}|<li>{{{point2}}}</li>|}}
    {{#if:{{{point3|}}}|<li>{{{point3}}}</li>|}}
    {{#if:{{{point4|}}}|<li>{{{point4}}}</li>|}}
    {{#if:{{{point5|}}}|<li>{{{point5}}}</li>|}}
    {{#if:{{{point6|}}}|<li>{{{point6}}}</li>|}}
    {{#if:{{{point7|}}}|<li>{{{point7}}}</li>|}}
    {{#if:{{{point8|}}}|<li>{{{point8}}}</li>|}}
    {{#if:{{{point9|}}}|<li>{{{point9}}}</li>|}}
    {{#if:{{{point10|}}}|<li>{{{point10}}}</li>|}}
    {{#if:{{{point11|}}}|<li>{{{point11}}}</li>|}}
    {{#if:{{{point12|}}}|<li>{{{point12}}}</li>|}}
  </ul>
</div>
 
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.infobox-tab').forEach(button => {
      button.addEventListener('click', () => {
        const tab = button.dataset.tab;
        document.querySelectorAll('.infobox-panel').forEach(panel => panel.style.display = 'none');
        document.querySelector('.infobox-panel.' + tab).style.display = 'block';
        document.querySelectorAll('.infobox-tab').forEach(b => b.classList.remove('active'));
        button.classList.add('active');
      });
    });
  });
</script>

Revision as of 18:38, 25 April 2025

 <figure class="infobox-image">
 </figure>
       
Anonymous
     <button class="infobox-tab" data-tab="about-me">About Me</button>
     <button class="infobox-tab" data-tab="about-idea">About My Idea</button>
   <button class="show-more" onclick="this.previousElementSibling.style.display='block'; this.style.display='none';">Show More</button>
   I give this idea away freely. Here's what I'd like if you decide to make my idea come true, though you're under no obligation

<script>

 document.addEventListener('DOMContentLoaded', function () {
   document.querySelectorAll('.infobox-tab').forEach(button => {
     button.addEventListener('click', () => {
       const tab = button.dataset.tab;
       document.querySelectorAll('.infobox-panel').forEach(panel => panel.style.display = 'none');
       document.querySelector('.infobox-panel.' + tab).style.display = 'block';
       document.querySelectorAll('.infobox-tab').forEach(b => b.classList.remove('active'));
       button.classList.add('active');
     });
   });
 });

</script>