The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toggle Button in Description

View previous topic View next topic Go down

Solved Toggle Button in Description

Post by Genesis on April 28th 2016, 12:00 am

If anyone could send a code for adding a toggle button on the forum desciption like ere that would be awesome. I'm talking about the toggle above the hexagonal Forumotion icon.

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray on April 28th 2016, 2:50 am

Do you mean the category toggler?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35659
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Toggle Button in Description

Post by Genesis on April 28th 2016, 3:06 am

Not that one, the one above it that doesn't look as good. The box one with the minus symbol.

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray on April 28th 2016, 3:15 am

Could you post a screenshot?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35659
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Toggle Button in Description

Post by Ange Tuteur on April 28th 2016, 3:34 am

@Genesis here's a very basic example code :
Code:
<!-- STYLES FOR THE BUTTON AND CONTENT -->
<style type="text/css">
#toggle-button {
  /* button style here */
}
 
#toggle-content {
  /* content style here */
}
</style>
 
<!-- TOGGLE BUTTON AND CONTENT -->
<a id="toggle-button" href="#">Hide</a>
<div id="toggle-content">CONTENT HERE</div>
 
<!-- JAVASCRIPT FOR TOGGLE LOGIC -->
<script type="text/javascript">(function() {
  // get the button and content
  var button = document.getElementById('toggle-button'),
      content = document.getElementById('toggle-content');
 
  // check if the content has been hidden
  if (my_getcookie('toggle_content') == 'hidden') {
    content.style.display = 'none';
    button.innerHTML = 'Show';
  }
 
  // make the button do something when it's clicked
  button.onclick = function() {
    var content = document.getElementById('toggle-content'); // get the content again, but locally inside this function
 
    // if the content has been hidden we'll show it, otherwise we'll hide it
    if (/none/.test(content.style.display)) {
      content.style.display = '';
      this.innerHTML = 'Hide';
      my_setcookie('toggle_content', 'shown');
    } else {
      content.style.display = 'none';
      this.innerHTML = 'Show';
      my_setcookie('toggle_content', 'hidden');
    }
 
    return false; // prevents the button from opening the HREF content
  };
}());</script>

I've added comments to explain the code, but if you need any help let me know. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by Genesis on April 28th 2016, 3:36 am

Thank you @Ange Tuteur!

Is there a way to make the toggle look like the category toggle on this forum?

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by Ange Tuteur on April 28th 2016, 3:40 am

Replace all instances of "Hide" and "Show" with whatever you want. It can be text ( +, -.. ), an image ( <img src="..."/> ), etc.. Then edit the stylesheet at the top to change the button or content styles :
Code:
<style type="text/css">
#toggle-button {
  /* button style here */
}
 
#toggle-content {
  /* content style here */
}
</style>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by Genesis on April 28th 2016, 3:46 am

Solved! Thank you once again "Ange Tuteur"!

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray on April 28th 2016, 3:58 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35659
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum