Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

December 02, 2021, 11:58:02 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 192594
  • Total Topics: 21017
  • Online Today: 97
  • Online Ever: 1035
  • (November 26, 2020, 04:45:12 AM)
Users Online
Users: 0
Guests: 94
Total: 94

Author Topic: Collapsible Divs within an article  (Read 713 times)

0 Members and 1 Guest are viewing this topic.

Offline Rasyr

  • Jr. Member
  • **
  • Posts: 14
Collapsible Divs within an article
« on: November 18, 2021, 06:07:21 PM »
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!


Offline tino

  • Developer
  • *
  • Posts: 2392
Re: Collapsible Divs within an article
« Reply #1 on: November 19, 2021, 01: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

Offline Rasyr

  • Jr. Member
  • **
  • Posts: 14
Re: Collapsible Divs within an article
« Reply #2 on: November 19, 2021, 06:04:43 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...
Code: [Select]
<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
Code: [Select]
<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!!!!

Offline @rjen

  • Support Team
  • *
  • Posts: 2968
    • FJR-club Nederland
Re: Collapsible Divs within an article
« Reply #3 on: November 19, 2021, 08:34:36 AM »
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 TP2.1.0 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 (latest Github)
Want to check what php version I am testing on? See: PHP Info

Offline Rasyr

  • Jr. Member
  • **
  • Posts: 14
Re: Collapsible Divs within an article
« Reply #4 on: November 19, 2021, 08:43:43 AM »
You can see it in action on this page if you like

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

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.