how to display the styling for javascipt "see more icon" css-CodePudding

I want to add the icon menu down on this code for expanding a list but it shows up the code rather than the icon when clicked. The first icon shows up when loaded but when you press on the javascript function it writes the code rather than displaying the span icon.

this is the code:

$(".readMore").click(function () {
    $(this).text(function(i, v) {
        return v === '<span ></span> show all brands' ? '<span ></span>hide' : '<span ></span> show all brands'
    })
})

CodePudding user response：

You are trying to include the span element with the class "glyphicon glyphicon-menu-down" as a string, but it is being interpreted as regular text. You need to wrap it inside a jQuery element, so that it is treated as an HTML element.

Try changing the following line:

$(this).text(function(i, v) { return v === show all brands ? v hide : show all brands })

to:

$(this).html(function(i, v) { return v === ' show all brands' ? v : ' show all brands' });

Also, you have a typo in the code, the "v hide" should be "v" and "hide" should be separate.

So, the final corrected code will be :

$(".readMore").click(function () { $(this).html(function(i, v) { return v === ' show all brands' ? v : ' show all brands' }); });

It will change the html inside the element on every click and display the icon.