Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle.
This version seems to work, with a jquery slide toggle.
HTML
<div class="card">
<h5 class="card-header">Welcome</h5>
<div class="card-body welcome-card-text">
<p class="card-text">This is my test area for <abbr title="web development" data-toggle="tooltip">webdev</abbr>. I keep a <a href="https://kruxor.com/section/code/" data-toggle="tooltip" title="collection of code">collection of code</a> here, mostly for my reference. Also if i find a good link, i usually <a href="https://kruxor.com/section/linx/" data-toggle="tooltip" title="my site links and bookmarks">add it here</a> and then forget about it. <a href="#!" onclick="$('.welcome-more-toggle').slideToggle();">more...</a></p>
<div class='welcome-more-toggle hide'>
<p class="card-text">
<!--<a href='https://kruxor.substack.com/?r=1agxo&utm_campaign=pub&utm_medium=web&utm_source=copy' target="_blank">Join me on Substack</a> if you want me to send you a collection of the things i have done or found or read for the week. Or -->You could also <a href="https://twitter.com/kruxor" target="_blank">follow me on twitter</a> or not... does anyone even use twitter anymore?<!-- if you prefer, i dont post much but i probably should!-->
</p>
<p>
If you found something useful or like my work, you can <a href="https://www.buymeacoffee.com/kruxor" target="_blank">buy me a coffee here</a>. Mmm Coffee. ☕
</p>
<p class="card-text">❤️👩💻🎮</p>
</div>
</div>
</div>CSS
.hide {
display:none;
}Scripts
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.0.1/dist/css/bootstrap-dark.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-->
<div class="card">
<h5 class="card-header">Welcome</h5>
<div class="card-body welcome-card-text">
<p class="card-text">This is my test area for <abbr title="web development" data-toggle="tooltip">webdev</abbr>. I keep a <a href="https://kruxor.com/section/code/" data-toggle="tooltip" title="collection of code">collection of code</a> here, mostly for my reference. Also if i find a good link, i usually <a href="https://kruxor.com/section/linx/" data-toggle="tooltip" title="my site links and bookmarks">add it here</a> and then forget about it. <a href="#!" onclick="$('.welcome-more-toggle').slideToggle();">more...</a></p>
<div class='welcome-more-toggle hide'>
<p class="card-text">
<!--<a href='https://kruxor.substack.com/?r=1agxo&utmcampaign=pub&utmmedium=web&utmsource=copy' target="blank">Join me on Substack</a> if you want me to send you a collection of the things i have done or found or read for the week. Or -->You could also <a href="https://twitter.com/kruxor" target="blank">follow me on twitter</a> or not... does anyone even use twitter anymore?<!-- if you prefer, i dont post much but i probably should!-->
</p>
<p>
If you found something useful or like my work, you can <a href="https://www.buymeacoffee.com/kruxor" target="blank">buy me a coffee here</a>. Mmm Coffee. ☕
</p>
<p class="card-text">❤️👩💻🎮</p>
</div>
</div>
</div>
External Link for Welcome Widget Card - Toggle
