Template:Infobox What Do I Want: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div class="infobox-idea"> | |||
<figure class="infobox-image"> | |||
[[File:What Do I Want.png|center|300px]] | |||
</figure> | |||
|- | <div class="infobox-meta"> | ||
| | <div class="infobox-user"> | ||
|- | <div class="user-avatar"> | ||
| | [[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>
<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>