need to have collapsible element in php using js and html

Question

I need to make one section in a table collapsible for making it look prettier. I have the following code snippets in editor_transdata.php

<script language="javascript">
function toggle_messege(type) {
    document.getElementById("div_messege").style.display = type;
    document.getElementById("hreh_close").style.display = type;
    }
</script>

<link type="text/css" href="../style/collapse.css" rel="stylesheet" media="all" />  

and to display what I want to be collapsible I have this

            echo '<td>';
            echo '<a class="right" ';
            echo 'href=\"javascript:toggle_messege(\'inline\')\" ';
            echo 'id=\'href_about\'>';              
            echo 'Summary </a> <br />';
            echo '<a class="hide" ';
            echo 'href=\"javascript:toggle_messege(\'none\')\" ';
            echo 'id=\'hreh_close\'> (Close)</a>';

            echo '<div id=\'div_messege\' class=\'hide\'>' . $row['datasummary'];
            echo '</div>';
            echo '</td>';

my css page is as follows

.hide {
display:none;
}
.right {
float:right;
}

however, when displayed I get something that looks like this and is not collapsible it looks like this https://imgur.com/LBcRxCB the paragraph should not be displayed until summary is clicked, nor should close. and clicking on summary or close gives the following error:

Access forbidden!

You don't have permission to access the requested object. It is either read-protected or not readable by the server.

Any information as to what I can do to fix this problem would be great.

Answer 1

Make your CSS have a .show{} class, and hide the element by default:

#element{display:none}
.show{display:block}

Then make your js toggle the class instead of toggling style type. You can use either jQuery or VanillaJS for this - whatever is your style.

In jquery it would look like this:

$('.toggle').click(function(){
    $("#element").toggleClass("show");
});

Finally, your html elements that you want to show and hide would look like this:

echo '<a href="#" class="toggle">Click this to toggle</a>\n
    <div id="element">\n'
        . $row['datasummary'] .
    '</div>';

EDIT

Edited to show phping the html, like you want. And to add this thought:

Or you could just use jQuery's .toggle() function:

$(".toggle").click(function(){
    $("#element").toggle();
});

Answer 2

I created a new js function:

    function showDiv(divName){
    //alert(divName);
    div = document.getElementById(divName);
    div.style.display="block";
    }

and used the following for my php implementation:

 echo '<a href="#collapse" name=' . $i . ' onclick="showDiv(this.name)">Summary</a>
<div id=' . $i . ' style="display:none">'
. $row['datasummary'] . 
'</div>';

and my css file:

#collapse{
display:none;
}

#collapse:target{
display:block;
}

The issue with declaring the location of the collapse.css file was incorrect. I changed the directory to "/sop/style/collapse.css"

Thank you for your help.