Show/Hide Info User on Postbit

[SELLECK87]

Perhaps I have explained myself wrongly. I meant some kind of spoiler in the user info in the postbit. I have seen that some people use bootstrap but if I activate it in my forum all the tables change.

you mean you want be able hid/show info with a button in postbit?
if yes you can add button with css you want or a div element , then with Jquery on click toggle display elements status.
for example :
1. you add a element in postbit element

<button id="togglepostbit">Show/hid<button>

2. add below jquery code before </header> tag in showthread template (if you want for only showthread)

			<script type="text/javascript">
			$('# togglepostbit').on('click',  function (e) {
				e.preventDefault();
				$('#togglepostbit').toggle();			});
			</script>

in my showthread template there is no </header>.

yes that is head tag , sorry for typo , and button not work for you because you are using classname , so for classname you must change jquery selector from

 $('# togglepostbit') 

to

 $('.togglepostbit')

# comes before ID
. comes before ClassName

			<script type="text/javascript">
			$('.togglepostbit').on('click',  function (e) {
				e.preventDefault();
				$('.togglepostbit').toggle();			});
			</script>

I did this but the button still didn't go. I have the same result as in the previous photo.

[Mostafa.Shiraali]

You could use the HTML Summary tag.

Change the .... Template Sets >> "Your Templates" >> Post Bit Templates >> postbit_author_user

to:

<details>
	<style>.show-user-details {cursor: help;}</style>
  <summary class="show-user-details">Details</summary>
	{$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}{$post['warninglevel']}
</details>

The style is just changing the cursor/pointer .... a choice here:
https://www.w3schools.com/cssref/pr_class_cursor.php

this is bad for SEO , because P is for Paragraph and Summary is clear from the name this way you are confusing the search engine , and with dulicated postbit stored in SE as duplicated content , so .....

---

oh ,sorry I did not changed second ID

<script type="text/javascript">
$('# togglepostbit').on('click',  function (e) {
e.preventDefault();
$('#postbitbox').toggle(); });
</script>

first is for button and second is for box you want show/hide

[lost puppy]

You could use the HTML Summary tag.

Change the .... Template Sets >> "Your Templates" >> Post Bit Templates >> postbit_author_user

to:

<details>
	<style>.show-user-details {cursor: help;}</style>
  <summary class="show-user-details">Details</summary>
	{$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}{$post['warninglevel']}
</details>

The style is just changing the cursor/pointer .... a choice here:
https://www.w3schools.com/cssref/pr_class_cursor.php

this is bad for SEO , because P is for Paragraph and Summary is clear from the name this way you are confusing the search engine , and with dulicated postbit stored in SE as duplicated content , so .....

---

This is HTML code .... literally written into the HTML .... Are you telling me that BASE HTML code will confuse search engines?

I would have thought that adding additional code (which includes non required languages) would be much more likely to confuse search engines?

The "Summary " tag is a part of HTML!

[SELLECK87]

<button id="togglepostbit">Show/Hide<button>
   
    {$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	%%TYL_NUMTHANKEDLIKED%%<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}{$post['warninglevel']}

is this correct? because that still doesn't work for me.

[Mostafa.Shiraali]

You could use the HTML Summary tag.

Change the .... Template Sets >> "Your Templates" >> Post Bit Templates >> postbit_author_user

to:

<details>
	<style>.show-user-details {cursor: help;}</style>
  <summary class="show-user-details">Details</summary>
	{$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}{$post['warninglevel']}
</details>

The style is just changing the cursor/pointer .... a choice here:
https://www.w3schools.com/cssref/pr_class_cursor.php

this is bad for SEO , because P is for Paragraph and Summary is clear from the name this way you are confusing the search engine , and with dulicated postbit stored in SE as duplicated content , so .....

---

This is HTML code .... literally written into the HTML .... Are you telling me that BASE HTML code will confuse search engines?

I would have thought that adding additional code (which includes non required languages) would be much more likely to confuse search engines?

The "Summary " tag is a part of HTML!

every HTML tag has a special meaning for the search engine , I never told you " HTML code will confuse search engines " , I meant Postbit is not the right place for the Summary tag for example for article title you must use <H> tag , and depend on number H you For the search engine, you specify that, for example, this is the title of the article, or titles that are part of the article itself

---

<button id="togglepostbit">Show/Hide<button>
   
    {$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	%%TYL_NUMTHANKEDLIKED%%<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}{$post['warninglevel']}

is this correct?  because that still doesn't work for me.

no ,because you not defined second ID and I think I  I did not explain well
you put information to div element like this

<button id="togglepostbit">Show/Hide<button>

<div id="postbitbox">    
 {$lang->postbit_posts} {$post['postnum']}<br />
 {$lang->postbit_threads} {$post['threadnum']}<br />
%%TYL_NUMTHANKEDLIKED%%<br />
{$lang->postbit_joined} {$post['userregdate']}
{$post['replink']}{$post['profilefield']}{$post['warninglevel']} 
</div>

and Jquery code is like this

$('#togglepostbit').on('click',  function (e) {
e.preventDefault();
$('#postbitbox').toggle();
});

in jquery code #togglepostbit  is ID of element that you click on it and postbitbox is ID and element you want show and hid each time on click

this is code in codepen

[SELLECK87]

Very strange. I followed the directions but it still doesn't work. I must be clumsy

[Mostafa.Shiraali]

Very strange. I followed the directions but it still doesn't work. I must be clumsy

your website URL?

[SELLECK87]

Very strange. I followed the directions but it still doesn't work. I must be clumsy

your website URL?

Done. Now can you check if I have done something wrong?  

[Mostafa.Shiraali]

based on tag position , change Jquery code to this

$(document).ready(function() {
$('#togglepostbit').on('click',  function (e) {
e.preventDefault();
$('#postbitbox').toggle();
});

});

and remove button as partent of <div id="postbitbox"> element , I meant you code is like

<button>

<div id="postbitbox">  
... 
</div>
</button>

remove button element as parent of div
first change solve your problem,second change is SEO Tip , and after change in showthread page use CTRL + F5 to clear browser cache

---

also if you want change show display with custom display you can change code like this

$(document).ready(function() {
$('#togglepostbit').on('click',  function (e) {
e.preventDefault();

    if ($('#postbitbox').css('display') == 'block') {
        $('#postbitbox').hide();
    } else {
	   $('#postbitbox').css( "display", "flex" );
    }


});

});

also for hide you can use fadeIn and fadeOut and other Jquery functions that you can find in here