Thanks Matt
Once again you have the answers to everything ;)
However, it didn't work for me to put in this.$el anywhere. But I found the solution by looking in the media component, as you suggested.
And you were right, the problem was that I didn't set the right scope.
The event hash did the trick!
For anyone who might have a similar problem here is the working code:
From the .js code:
events: {
"click .btnShow": "showHide_text"
},
showHide_text: function(event){
var $moretext = this.$(".moreTxt");
var $lessText = this.$(".lessText");
var $button = this.$(".btnShow");
if ($moretext.hasClass("isOpen")) {
$moretext.hide(1000);
$lessText.show(1000);
$moretext.removeClass("isOpen");
}
else{
$moretext.show(1000);
$lessText.hide(1000);
$moretext.addClass("isOpen");
}
},
in the postRender: function() I still have:
$(".moreTxt").hide();
and from the .hbs-code:
<div class="text-inner component-inner" role="region" aria-label="{{_globals._components._text.ariaRegion}}">
{{> component this}}
<div class="moreTxt">
<p>{{{moreText}}}</p>
<button class="btnShow button" role="button">{{{lessText_btn}}}</button>
</div>
<div class="lessText">
<button class="btnShow button" role="button">{{{moreText_btn}}}</button>
</div>
</div>