Hide/Show Comments ?uestion

  • Resolved marcy_sss

    (@marcy_sss)


    15 years, 8 months ago

    Hello Everyone!

    I am really close to being done with my first WordPress install, but I have one little bug to squash. ??

    https://thrivecommunities.com/test/blog

    I am using the Hide/Show comments plugin. My problem is on index.php — when you click on Comments(2) below the post (I only show one post at a time), it goes to single.php with the comments hidden, how it should be when you click a permalink, however users will expect comments to show when they click Comments(2).

    SO, I either need to redirect from index.php straight to the first post’s permalinked page (easiest), or figure out a way to toggle comment visibility via the URL.

    Has anyone else run into this problem?

    I tried changing the get_comments_link() function in wp-includes/comment-template.php to generate a query string: 

    function get_comments_link() {
	return get_permalink() . '?show=true';
}

    Then in the plugin’s php page, use PHP with Javascript to toggle the comments on and off: 

    // escape slashes removed below for readability

echo "<script type="text/javascript"> ";
if($_GET['show'] == 'true'){
   echo "var currLayerId = 'hide'";
} else {
   echo "var currLayerId = 'show'";
}
echo "
function togLayer(id) {
  if(currLayerId) setDisplay(currLayerId, "none");
  if(id)setDisplay(id, "block");
        currLayerId = id;
}

function setDisplay(id,value) {
    var elm = document.getElementById(id);
    elm.style.display = value;
}
</script>

<div id="show" style="display: block;">
<a href="?show=false" onclick="togLayer('hide');return false;" title="">",
$linkText1, " (", comments_number('0','1','%'), ") ", $linkText2,
"</a>
</div>

<div id="hide" style="display:none;">
<a href="?show=true" onclick="togLayer('show');return false;" title="">",
$relinkText,
"</a></div>

    This isn’t working, obviously. I’m guessing the problem is with the inline style=”display:none;” — Any suggestions on how to make this work dynamically?

    Thanks a million!
    -Marcy

Viewing 1 replies (of 1 total)
  • Thread Starter marcy_sss

    (@marcy_sss)

    Well that was fast, I solved my own question. ?? Here is my solution for the above problem in case someone else runs into it! I was able to keep the javascript functionality of showing/hiding comments without a page reload by using a $_GET variable when coming from index.php.

    The problem arose when clicking the “Comments” link below a post on index.php, it would take me to single.php with comments hidden, so I would have to click the Comments link twice to get them to show.

    When my example goes live in a week or two (today is 3/25/09), the blog site will be located at https://www.thrivecommunities.com/blog .

    Edit get_comments_link() function in wp-includes/comment-
    template.php to generate a query string variable on index.php:

    function get_comments_link() {
    return get_permalink() . '?show=true';

     // link was "#comments" anchor, you can keep it if your
     // page is really long
}

    In the Hide/Show Comments plugin, edit the file called hideshowcomments.php. Note: I have left off a few lines from the top of the plugin script that were unchanged in my efforts.

    <?php
function hideshowComments () {

   $linkText1 = __("Comments", "hideshowcomments");
   $linkText2 = __("", "hideshowcomments");
   $relinkText = __("Hide Comments", "hideshowcomments");

   $show = $_GET['show'];
echo "
<script type=\"text/javascript\"> ";

   if($show == 'true'){ // show comments when coming from index.php
	echo "var currLayerId = \"hide\";\n";
	$showLink = 'display:none';
	$hideLink = 'display:block';
   }
   else if($show == NULL) {
      // if there is no query string, hide comments like normal
	echo "var currLayerId = \"show\";\n";
	$showLink = 'display:block';
	$hideLink = 'display:none';
   }

echo "       // create javascript functions
function togLayer(id) {
   if(currLayerId) setDisplay(currLayerId, \"none\");
   if(id)setDisplay(id, \"block\");
   currLayerId = id;
}

function setDisplay(id,value) {
   var elm = document.getElementById(id);
   elm.style.display = value;
}
</script>

<div id=\"show\" style=\"".$showLink.";\" class=\"feedback2\">
<a href=\"#\" style=\"text-decoration:none;\" onclick=\"togLayer('hide');return false;\" title=\"\">",
$linkText1, " (", comments_number('0','1','%'), ") ", $linkText2,
"</a>
</div>

<div id=\"hide\" style=\"".$hideLink.";padding:0;\">
<div class=\"hideCommentsLink\"><a href=\"#\" style=\"text-decoration:none;\" onclick=\"togLayer('show');return false;\" title=\"\">",
$relinkText,
"</a></div>
", comments_template(), "</div>";
}
?>

    I am using custom CSS as well, which I have not included here. If you have problems feel free to contact me! me at marcyland dot com

    Cheers!

Viewing 1 replies (of 1 total)
  • The topic ‘Hide/Show Comments ?uestion’ is closed to new replies.