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.

How can I add on Toggle Button Javascript slideup/slidedown?

View previous topic View next topic Go down

Solved How can I add on Toggle Button Javascript slideup/slidedown?

Post by Van-Helsing on Wed Mar 02, 2016 10:48 am

Hello,
How can I add on Toggle Button Javascript slideup/slidedown functions on this javascript and change a little bit the mainhead 's bar color to looks collapsed on collapsed category?

Code:
$(function(){$(".main .main-head").prepend('<span class="collapse" style="padding: 0px; float:right;width: 28px;height: 17px;overflow: hidden;cursor:pointer;"><img src="http://i73.servimg.com/u/f73/17/06/15/51/cat_mi11.png" alt="Close" /><img class="hide" src="http://i73.servimg.com/u/f73/17/06/15/51/cat_ma11.png" alt="Open" /></span>');$(".collapse").each(function(a){$(this).attr("id","collapse"+location.pathname+a);if(my_getcookie("collapse"+location.pathname+a)=="2"){$(this).children("img[alt='Close']").hide();$(this).children("img[alt='Open']").show();$(this).parent().next().hide()}});$(".collapse img[alt='Close']").click(function(){my_setcookie($(this).parent().attr("id"),1,2,0);$(this).hide().next().show();$(this).parent().parent().next().hide()});$(".collapse img[alt='Open']").click(function(){my_setcookie($(this).parent().attr("id"),0,2,0);$(this).hide().prev().show();$(this).parent().parent().next().show()})});

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by Van-Helsing on Sun Mar 06, 2016 2:18 pm

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by An on Sun Mar 06, 2016 3:43 pm

I'm not sure what you mean about the mainhead color, but you can change your script to the one below for the slide effect.
Code:
$(function(){
  $(".main .main-head").prepend('<span class="collapse" style="padding: 0px; float:right;width: 28px;height: 17px;overflow: hidden;cursor:pointer;"><img src="http://i73.servimg.com/u/f73/17/06/15/51/cat_mi11.png" alt="Close" /><img class="hide" src="http://i73.servimg.com/u/f73/17/06/15/51/cat_ma11.png" alt="Open" /></span>');
  $(".collapse").each(function(a){
    $(this).attr("id","collapse"+location.pathname+a);
    if(my_getcookie("collapse"+location.pathname+a)=="2"){
      $(this).children("img[alt='Close']").hide();
      $(this).children("img[alt='Open']").show();
      $(this).parent().next().hide()
    }
  });

  $(".collapse img[alt='Close']").click(function(){
    my_setcookie($(this).parent().attr("id"),1,2,0);
    $(this).hide().next().show();
    $(this).parent().parent().next().slideUp()
  });

  $(".collapse img[alt='Open']").click(function(){
    my_setcookie($(this).parent().attr("id"),0,2,0);
    $(this).hide().prev().show();
    $(this).parent().parent().next().slideDown()
  });
});

Basically you change hide() into slideUp() and show() into slideDown()

An
Forumember

Posts : 42
Reputation : 23
Language : English

http://help.forumotion.com

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by Van-Helsing on Mon Mar 07, 2016 1:28 am

Thank you very much @An I setup and the slideup/slidedown functions it working perfectly the only problem is that not changes the opacity of the collapsed category 's header (main-head) keeps the original colors.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by Van-Helsing on Wed Mar 09, 2016 12:16 am

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by An on Wed Mar 09, 2016 10:14 am

So you want it to become a different color when it's hidden? Find the two event handlers below.
Code:
  $(".collapse img[alt='Close']").click(function(){
    my_setcookie($(this).parent().attr("id"),1,2,0);
    $(this).hide().next().show();
    $(this).parent().parent().next().slideUp()
  });
 
  $(".collapse img[alt='Open']").click(function(){
    my_setcookie($(this).parent().attr("id"),0,2,0);
    $(this).hide().prev().show();
    $(this).parent().parent().next().slideDown()
  });

Inside the first event handler (which is for [alt='Close']) add the statement below. It can be after or before any of the existing statements (e.g. $(this).hide().next().show()), execution order doesn't matter too much here.
Code:
$(this).closest('.main-head').addClass('category_hidden');
The above statement will add a class to the mainhead when it's hidden. To remove the class when it's visible add the statement below to the second event handler. (the one for [alt='Open'])
Code:
$(this).closest('.main-head').removeClass('category_hidden');
As you guessed, this one will remove the class. All you need to do afterwards is define a style in CSS for the class.
Code:
.category_hidden {
  /* style properties */
}

An
Forumember

Posts : 42
Reputation : 23
Language : English

http://help.forumotion.com

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by Van-Helsing on Wed Mar 09, 2016 11:48 am

Hello @An,
Thank you very much, it is solved Smile

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I add on Toggle Button Javascript slideup/slidedown?

Post by APE on Wed Mar 09, 2016 12:50 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8340
Reputation : 719
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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