Onclick div only works for one user

Question

I am using this code on my forum postbit. I am trying to have a div element reveal some text for each user but I can only get it working for the first user.

The other divs are always open. I am not sure where I'm going wrong with it.

function toggleDiv(id) {
  $("#" + myContent).toggle();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:toggleDiv('myContent');">
  <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
  Reveal text here.
</div>

Answer 1

Your function takes a parameter id, but you're using myContent i the body of the function. Like this it works:

function toggleDiv(id) {
   $("#"+id).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:toggleDiv('myContent');"><i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw">icon here</i></a>



<div class="animated fadeIn" id="myContent" style="padding: 10px;">
reveal text here
</div>

Answer 2

A couple of changes here:

1. Add the jQuery source. Add this script tag above your script tag: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   Note: it appears Mr. Polywhirl has added this to your sample.
2. Utilize the id parameter in function toggleDiv() i.e. $("#"+id).toggle();, unless myContent is defined elsewhere, it will be undefined so $("#" + myContent).toggle(); will cause an error.
3. To have the content initially hidden, add the style display: none.
4. Remove the fadeIn class name initially and add it after toggling the element using .toggleClass().

See the updated example below.

As far as when to show the message for the first user, we need to know what your business logic is for that concept. Can you tell what the pid (or uid, given this list of fields in their API for posts) value is of the first user, perhaps based on a given list of posts in MyBB? You mention that this code is at the top of the page: <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>. So if you knew a certain pid value (e.g. 1337) you could conditionally add the code to add the message to the DOM - e.g.

$html = '';
if ($post['pid'] == 1337) {
     $html .= '<a href="javascript:toggleDiv(\'myContent\');">';
}
//add $html to the rest of the HTML outputted to the page

function toggleDiv(id) {
  $("#" + id).toggle().toggleClass('fadeIn');
}

.animated {  
    opacity: 0;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}
.fadeIn {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<a href="javascript:toggleDiv('myContent');"><i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i></a>
<div class="animated" id="myContent" style="padding: 10px; display: none">
  reveal text here
</div>

Answer 3

Don't you mean $("#" + id).toggle(); ?

If you look at the console, you will see an error message saying that myContent is undefined.

You cannot concatenate a String ('#') with an undefined variable in JavaScript.

function toggleDiv(id) {
  $("#" + id).toggle();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:toggleDiv('myContent');">
  <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
  Reveal text here.
</div>

Answer 4

You are using myContent instead of id inside the function, replace that and it should work:

function toggleDiv(id) {
  $("#" + id).toggle();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
  <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
  Reveal text here.
</div>