The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Toggle Button in Description

3 posters

Go down

Solved Toggle Button in Description

Post by Take Notes 28/4/2016, 05:00

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.
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray 28/4/2016, 07:50

Do you mean the category toggler?


Toggle Button in Description Slgray10

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

Male Posts : 51537
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Toggle Button in Description

Post by Take Notes 28/4/2016, 08:06

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

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray 28/4/2016, 08:15

Could you post a screenshot?


Toggle Button in Description Slgray10

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

Male Posts : 51537
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Toggle Button in Description

Post by Ange Tuteur 28/4/2016, 08:34

@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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by Take Notes 28/4/2016, 08:36

Thank you @Ange Tuteur!

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

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Toggle Button in Description

Post by Ange Tuteur 28/4/2016, 08:40

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Button in Description

Post by Take Notes 28/4/2016, 08:46

Solved! Thank you once again "Ange Tuteur"!
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Toggle Button in Description

Post by SLGray 28/4/2016, 08:58

Topic solved and archived


Toggle Button in Description Slgray10

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

Male Posts : 51537
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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