I have built a status and reply system for a project site I am working on.
I am going to hide the reply box for each status post within a button and use the .toggle() function in js to make it show onclick and hide again onclick. I have used a PHP variable for the id of the hidden div and that Variable contains the id of the status on the database as that is the only thing that makes each status unique so using this as a div id for replies make sense as it will give each reply box the id of its parent what makes it a unique reply box for each status that the reply box is linked too. The toggle function below has no problem with toggling so I know that the id for the div is working for an id and that the toggle function can pick up the id within the php variable.
The problem I am having is that the toggle feature itself is only toggling the bottom div's reply box regardless what reply button is pressed e.g status 1,2 or reply 3. The image shows you the box that is displayed and this is after pressing the top statuses open reply button. The reply box that is shown is also only link to the bottom div so if i press the top open reply button then the reply box that is shown below the bottom status only sends replies to the bottom status and not to the top one so regardless what button is pressed it opens up the bottom statuses reply box.
I do apologize as I was going to post the actual image here but i cant as I do not have a reputation of 10. If I get to 10 I will delete this text and link and replace it with the image. http://gyazo.com/97e8ac89ec623d5a876ee2ebb63fe8fb
Please ignore the fact that the replies are not displayed in their own divs and are displayed as black writting in the picture as I have not created the css code to display these in a neat way.
Below are two versions of js toggle functions that both work but they both work with the above problem script 1
<script>
var show;
show = '<?= $status_id ?>';
function showreply() {
$('#' + show).toggle();
}
</script>
This is script 2 what has the same effect
<script>
function showreply() {
$('#<?php echo $status_id?>').toggle();
}
</script>
Below is the php code that has the div in it that gets toggled using js and also has the unique id that is set using the php variable.
$mail .= '<div id="'.$status_id.'" class="replyholder">.......THIS IS THE CONTENT......</div>';
As i said the problem is the fact that the js script is not running for each unique div and is only working for the bottom div whether it be 2 or 10 divs that are displayed. It skips all the divs above it and thinks that all the open reply buttons belong to the bottom div.
Below is the button code that runs the js script when clicked.
$mail .= '<button class="replybutton" onclick="showreply();">Open Reply</button>';
This button code is put above the div that is toggled using the js scripts in my actual code so please do not think I have this button below the div.
Does anyone know how to solve this problem if it is possible to do what I would like to do. I would appreciate any help anyone can provide as I cant really move on with this status system as I also need to adopt the same js script to toggle the viewing of replies as well so i can neatly compact everything on my site.
thank you for reading this and I look forward to your answers
