Open/close button change text

JavaScript
1

I have this toggle button that opens and closes.
It works well, but the text does not change back from “close” to “open” after you first open it and then close it.

How to fix?

s = "<span class='box'>open</span>";
    z.find("a").length > 10 && (z.toggleClass("box_tags"), z.append(s)),
        $(".box").click(function() {
            $(this).parent().toggleClass("box"), "close" == $(this).text() ? $(this).html("open") : $(this).html("close")
2

Hi!
Can you show me the full code?

3

Hi!

Does the text say initially close and not Close? Javascript is case sensitive:

This works:
https://jsfiddle.net/skaparate/camd7es6/3/

4

@dzhuman - Hi, sorry, I updated and added all code.

5

@skaparate - Hi! Thanks, I see, but my code is a bit different, I updated and added it in my question, sorry for not doing so earlier.

6

I have this toggle button that opens and closes.
It works well, but the text does not change back from “close” to “open” after you first open it and then close it.

How to fix?

s = "<span class='box'>open</span>";
    z.find("a").length > 10 && (z.toggleClass("box_tags"), z.append(s)),
        $(".box").click(function() {
            $(this).parent().toggleClass("box"), "close" == $(this).text() ? $(this).html("open") : $(this).html("close")
7

I think you need to add more information but if you’re trying to turn close to open and open to close then this works:


Although I have a feeling you’re not expressing your needs clearly.

8

@AaronP - Hi, I updated my code, its all in the .js - I do not have text in my html.
What I try to achieve is that when the box is open and text shows “close”, that the text returns back to “open” when the box gets closed. It has to be all in .js.

9

Hi Ronnie!
Look!

HTML Code:

<button id="btn">close</button>

<div class="box">
  Something...
</div>

CSS Code:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.box--hidden {
  display: none;
}

JQuery Code:

$(document).ready(function(){
  btn = $('#btn');
  box = $('.box');
  
  btn.click(function(){
    "close" == btn.text() ? btn.text("open") : btn.text("close");
    box.toggleClass("box--hidden");
  });
});

also, you can try to do the following:
Open your project in a browser and cause “Insepct” (for Chrome), then go to the tab “Console” and you will see errors…