MyBB Community Forums

Hello guys I have been trying to work more on the postbit of my new upcoming theme however since I'm no expert in jQuery I think I have made some problem.

Aight so the thing I'm trying to do is to hide the author statistics under a div with a style of no display on document load and then I'm toogling it with a button.

But it works only for the first post i.e  lemme provide a screenshot to clear it up.

As you can see in the image it works perfectly fine for the first post but in the second post when I click on the button it opens the authors stats instead of the one on which I click.

https://gyazo.com/c2181b7f79a08060f6094a8ab4e40001

Heres the code 

<button onclick="toggle_visibility('foo');" class="reveal"> <i class="fa fa-sort-desc" aria-hidden="true"></i> </button>
<div id="foo" style="display: none;">
<div class="author_statistics">

{$post['user_details']}
</div>
</div>

And the script code 

 function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

Thanks and regards

id is unique in a page you can't use it with all post.
And this code is not a jQuery code.

(2016-08-26, 07:41 PM)chack1172 Wrote: [ -> ]id is unique in a page you can't use it with all post.
And this code is not a jQuery code.

Do you any other alternative, I'm not at all good at jQuery or Javascript.

BUMP. Anyone?

Take a look at .toggle(). Examples are at bottom

(2016-08-27, 09:26 AM)nth Wrote: [ -> ]Take a look at .toggle(). Examples are at bottom

Yes I did and also tried all of them. But the problem is still the same, When I click on the button it opens the first post (AUTHOR's) statistics. No matter where I click.

code like below should work

<div class="author_statistics">
		<a onclick="jQuery(this).parents('.author_statistics').find('.author_stats').toggle('slow'); return false;" href="#">Show/Hide</a>
       
          <div class="author_stats" style="display: none;">
          
		{$post['user_details']}
	</div>
           <noscript>
             please enable javascript..
           </noscript>
	</div>

(2016-08-27, 10:35 AM).m. Wrote: [ -> ]code like below should work

<div class="author_statistics">
		<a onclick="jQuery(this).parents('.author_statistics').find('.author_stats').toggle('slow'); return false;" href="#">Show/Hide</a>
       
          <div class="author_stats" style="display: none;">
          
		{$post['user_details']}
	</div>
           <noscript>
             please enable javascript..
           </noscript>
	</div>

Aight that did it once again you're saved my day . Thanks a ton pal.