Change Text and Style on Toggle

Question

I'm stuck on how I can change the text and the style of the following code I wrote when using click.

var toggleButton = [
    '<div class="toggleButton">',
    '<a href="#">',
    '<i class="icon icon-comment"></i>',
    '<span class="fb_comments_count">2</span>',
    '<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
    '</a>',
    '</div>'
].join('');

$(function() {
    //declare variables
    var $comments = $("#comments_thread");
    //only activate the toggle if comments exists
    if ($comments.length) {
        //comments initially hidden
        $comments.hide();
        //append the toggle button
        $(toggleButton).find('a').html("show comments");
        $(toggleButton).insertBefore($comments);
        //action when the toggle button is clicked

    $(".toggleButton").click(function(e) {
            e.preventDefault();
            $comments.toggle("slow", function() {
                //change the toggle button's text
                var anchor = $(".toggleButton a");
                var anchorText = anchor.text() == 'show comments' ? 'hide comments' : 'show comments';
                $(anchor).text(anchorText);
            });
        });

    }
});

I'd like to change the text from "show comments" to "collapse," hide icon-comment and fb_comments_count, and replace the icon-arrow-down with a different icon. Below is the CSS for reference. Any help would be much appreciated in advance!

.icon-arrow-down {
    float: right !important;
  padding-right: 15px;
}
.optshow {
    float: right;
  /*padding-right: 15px;*/
}
.toggleButton {
    margin-top: 30px;
  text-align: center;
}
.toggleButton > a {
  color: #8e8e8e !important;
  cursor: pointer;
  border: 2px solid #8e8e8e;
    box-sizing: border-box;
  display: block;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  /*padding: 8px 30px 8px 30px;*/
  line-height: 38px;
  height: 42px;
    text-transform: uppercase;
  transition: background-color .1s ease 0s,color .1s ease 0s;
}
.toggleButton > a:hover {
  background-color: #8e8e8e;
  color: #fff !important;
  text-decoration: none !important;
}
.toggleButton .icon {
    font-size: 18px;
  float: left;
  line-height: 38px;
  padding-left: 15px;
}
.toggleButton .fb_comments_count {
    float: left !important;
  padding-left: 15px;
}

Answer 1

looks like your code does 1/3 of what you like to achieve. Your main problem is that you override your whole toggle button with your anchor text.

I've created a small snippet for you to point you in the right direction, from here on you have to change the icon class with the one you need.

var toggleButton = [
'<div class="toggleButton">',
'<a href="#">',
'<i class="icon icon-comment"></i>',
'<span class="fb_comments_count">2</span>',
'<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
'</a>',
'</div>'].join('');

$(function() {
//declare variables
var $comments = $("#comments_thread");
//only activate the toggle if comments exists
if ($comments.length) {
    //comments initially hidden
    $comments.hide();
    //append the toggle button
    $(toggleButton).find('a').html("show comments");
    $(toggleButton).insertBefore($comments);
    //action when the toggle button is clicked

$(".toggleButton").click(function(e) {
        e.preventDefault();
        var $toggleButton = $(e.currentTarget);

        $comments.toggle("slow", function() {
            //change the toggle button's text
            var $optShow = $toggleButton.find('.optshow'),
                $commentsCount = $toggleButton.find('.fb_comments_count'),
                anchorText = ($optShow.text() === 'show comments') ? 'hide comments' : 'show comments';

            $optShow.text(anchorText);
            $commentsCount.toggle();
        });
    });

}
});

var toggleButton = [
    '<div class="toggleButton">',
    '<a href="#">',
    '<i class="icon icon-comment"></i>',
    '<span class="fb_comments_count">2</span>',
    '<i class="icon icon-arrow-down"></i><div class="optshow">show comments</div>',
    '</a>',
    '</div>'
].join('');

$(function() {
    //declare variables
    var $comments = $("#comments_thread");
    //only activate the toggle if comments exists
    if ($comments.length) {
        //comments initially hidden
        $comments.hide();
        //append the toggle button
        $(toggleButton).find('a').html("show comments");
        $(toggleButton).insertBefore($comments);
        //action when the toggle button is clicked

    $(".toggleButton").click(function(e) {
            e.preventDefault();
        	var $toggleButton = $(e.currentTarget);
        
            $comments.toggle("slow", function() {
                //change the toggle button's text
                var $optShow = $toggleButton.find('.optshow'),
                    $commentsCount = $toggleButton.find('.fb_comments_count'),
                	anchorText = ($optShow.text() === 'show comments') ? 'hide comments' : 'show comments';
                
                $optShow.text(anchorText);
                $commentsCount.toggle();
            });
        });

    }
});

.icon-arrow-down {
    float: right !important;
  padding-right: 15px;
}
.optshow {
    float: right;
  /*padding-right: 15px;*/
}
.toggleButton {
    margin-top: 30px;
  text-align: center;
}
.toggleButton > a {
  color: #8e8e8e !important;
  cursor: pointer;
  border: 2px solid #8e8e8e;
    box-sizing: border-box;
  display: block;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  /*padding: 8px 30px 8px 30px;*/
  line-height: 38px;
  height: 42px;
    text-transform: uppercase;
  transition: background-color .1s ease 0s,color .1s ease 0s;
}
.toggleButton > a:hover {
  background-color: #8e8e8e;
  color: #fff !important;
  text-decoration: none !important;
}
.toggleButton .icon {
    font-size: 18px;
  float: left;
  line-height: 38px;
  padding-left: 15px;
}
.toggleButton .fb_comments_count {
    float: left !important;
  padding-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="comments_thread">
    <div class="comment">Comment one</div>
    <div class="comment">Comment two</div>
    <div class="comment">Comment three</div>
</div>