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 do I customize my spoiler?

View previous topic View next topic Go down

Solved How do I customize my spoiler?

Post by Kamui on June 24th 2015, 11:33 pm

Hey,

I don't like the way my spoilers open, they just pop open like this one

Spoiler:
Hi

I'd like one that shows the animation of it smoothly sliding open. Similar to this forums search bar, and would there be anyway to add a table for my spoiler? 
  

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Kamui on June 25th 2015, 12:55 pm

bump

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Ange Tuteur on June 25th 2015, 4:45 pm

Hi @Kamui,

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Placement : All the pages OR in the topics
Paste the following code and submit :
Code:
$(function() {
  $('.spoiler_content').css('display', 'none');
  $('.spoiler dt').click(function() {
    var node = $(this).parent().find('.spoiler_content');
    node[0].style.display == 'none' ? node.slideDown(function() { this.style.display = 'block' }) : node.slideUp();
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Kamui on June 25th 2015, 10:22 pm

Hey,

The code works fine, but I have spoilers within spoilers as well; whenever I open the main spoiler it automatically opens up the spoilers within it. Anyway I can prevent this? If not, it's fine.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Ange Tuteur on June 26th 2015, 12:11 am

Oooh I didn't think about that.. replace your script with this and it should be good.
Code:
$(function() {
  $('.spoiler_content').css('display', 'none');
  $('.spoiler dt').click(function() {
    var node = this.nextSibling.firstChild;
    node.style.display == 'none' ? $(node).slideDown(function() { this.style.display = 'block' }) : $(node).slideUp();
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Kamui on June 26th 2015, 1:24 am

It's not showing the content in the box at all now since the spoiler isn't opening.


Forum Link:     http://hunterxhunter.forummotions.com/t25-hatsu-techniques

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Ange Tuteur on June 26th 2015, 1:48 am

The last script I gave you is meant for phpbb3, try this for phpbb2 :
Code:
$(function() {
  $('.spoiler_content').css('display', 'none');
  $('.spoiler dt').click(function() {
    var node = $(this).parentNode.find('> dd > .spoiler_content');
    node[0].style.display == 'none' ? node.slideDown(function() { this.style.display = 'block' }) : node.slideUp();
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Kamui on June 26th 2015, 9:45 pm

Still not working.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Ange Tuteur on June 27th 2015, 12:13 am

My mistake, I must've not been paying too close attention, because I used a native JS method on a jQuery object.. lol!

Third times the charm :
Code:
$(function() {
  $('.spoiler_content').css('display', 'none');
  $('.spoiler dt').click(function() {
    var node = $(this).parent().find('> dd > .spoiler_content');
    node[0].style.display == 'none' ? node.slideDown(function() { this.style.display = 'block' }) : node.slideUp();
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Kamui on June 27th 2015, 12:23 am

Cool Very good héhé  The code finally works, thanks for the help Ange, you always come through!

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How do I customize my spoiler?

Post by Ange Tuteur on June 27th 2015, 1:56 am

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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