TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 08:32:00 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,104
  • Total Topics: 21,212
  • Online today: 174
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 160
  • Total: 160

Collapsible Divs within an article

Started by Rasyr, November 19, 2021, 01:07:21 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Rasyr

Link to my forum: http://www.wizlair.net/
SMF version: 2.0.18
TP version: 2.1.0
Default Forum Language: English
Theme name and version: jane v0.1
Browser Name and Version: Opera (not sure of version, but it is recent) and Chrome (installed less than a month ago)
Mods installed: only Tiny Portal at the moment (no other mods)
Related Error messages: no error message



Ok, my site is all setup and working great, so I do not have any issues with it.

My issue is trying to figure out how to do something that I want to do, mainly because I want to convert  my other website from Wordpress to SMF/TinyPortal. But there are a couple of things I want to do that I am having issues figuring out how to do.

For example, One of the things I want to do is wiki style links in writing the articles (I started another thread in the feature requests area for this).

In this post, I want to know if anybody knows of a way to make collapsible divs inside of an article.

I tried putting in the bootstap 3 links and for the most part they work IF I include the style sheet for Bootstrap, but doing that kills all my headers (on the sidebars) by dropping them about 50 or 60 pixels below where they should be. And they are not working without that css file.

What I am wanting is something (anything) like can be found on this page -- http://www.firehawkgames.biz/?page_id=205 -- where clicking on any of the links opens/displays the div beneath it, to allow the content to be seen.

So, does anybody know how to make this work without it breaking the theme? All advice is appreciated!


tino

You want some js for that. Set each div with its own unique name and then have some JavaScript to change the css element. onHide and onShow will probably do it. Or display:block display:none

Rasyr

Quote from: tino on November 19, 2021, 08:41:36 AM
You want some js for that. Set each div with its own unique name and then have some JavaScript to change the css element. onHide and onShow will probably do it. Or display:block display:none

my brain must have been fried.... hehehe...

that was exactly what I needed.

I added a simple function to the index template like so...

<script>
function faqToggle(y) {
 
  var x = document.getElementById(y);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>


and then I used the "button" tag with an onclick attribute to activate it, and the div set to not display to begin with

<button class="faq" onclick="faqToggle('ccp6');">Glossary – Character Class (p. 6)</button>
<div style="display:none;" id="ccp6">
              ...
        </div>

(and I also styled the buttons in the index.css file), so that I have a list of blue buttons, you click on one and boom....

Thank you again!!!!

@rjen

That's a neat trick... I'll use that somewhere too...

Instead of editing the index template I included the script in a hidden block on the page. That works too...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

Rasyr

You can see it in action on this page if you like

https://wizlair.net/index.php?page=n1efaq

Quote from: @rjen on November 19, 2021, 03:34:36 PM
That's a neat trick... I'll use that somewhere too...

Instead of editing the index template I included the script in a hidden block on the page. That works too...

putting scripts in a hidden block on the page.. that is a neat trick too.... I have never tried or even thought of that. Will have to se if I can figure out how to do it.