CODEWITHSUNDEEP
javascriptjqueryhtml
peterHasemann
peterHasemann

Reputation: 1590

switching button texts by using toggle states

When clicking on a button, this button should change its text. The button itself toggles another element.

function switchBtnText(btn, contentElement, contentText) {
  var stateText = contentElement.is(":hidden") ? "hide" : "show";
  contentText += " <b>" + stateText + "</b>";
  $(btn).html(contentText);
}

function toggleOne() {
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), $("#p1"), "Text 1");
}

function toggleTwo() {
  $("#p2").slideToggle();
  switchBtnText($("#btn2"), $("#p2"), "Text 2");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="toggleOne()">Text 1 <b>hide</b></button>
<button id="btn2" onclick="toggleTwo()">Text 2 <b>hide</b></button>

<p id="p1">Text _ 1 _</p>
<p id="p2">Text _ 2 _</p>

So the first click on the button is fine. The button switches its text to "show". But when clicking agai (the element is shown) it does not switch back to the "hide" text.

I use contentElement.is(":hidden") to check if the element is hidden or shwon.

Upvotes: 0

Views: 45

Answers (2)

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

You could move the slideToggle logic to the function switchBtnText to avoid repeat that code in all toggleOne and toggleTwo funcitons...

Than, within function switchBtnText, update the contentText variable once the slideToggle function call is finished

And finally update the button text $(btn).html(contentText);

Code:

function switchBtnText(btn, contentElement, contentText) {
  var stateText = contentElement.is(':hidden') ? 'hide' : 'show';
  contentElement.slideToggle(function () {
    contentText += ' <b>' + stateText + '</b>';
    $(btn).html(contentText);    
  });
}

function toggleOne() {
  switchBtnText($('#btn1'), $('#p1'), 'Text 1');
}

function toggleTwo() {
  switchBtnText($('#btn2'), $('#p2'), 'Text 2');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="toggleOne()">Text 1 <b>hide</b></button>
<button id="btn2" onclick="toggleTwo()">Text 2 <b>hide</b></button>

<p id="p1">Text _ 1 _</p>
<p id="p2">Text _ 2 _</p>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You have to call .is(":hidden") before you use .slideToggle()

function toggleOne() {
  var isVisible = $("#p1").is(":hidden");
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), isVisible, "Text 1");
}


function switchBtnText(btn, isVisible, contentText) {
  var stateText = isVisible ? "hide" : "show";
  contentText += " <b>" + stateText + "</b>";
  $(btn).html(contentText);
}

function toggleOne() {
  var isVisible = $("#p1").is(":hidden");
  $("#p1").slideToggle();
  switchBtnText($("#btn1"), isVisible, "Text 1");
}

function toggleTwo() {
  var isVisible = $("#p2").is(":hidden");
  $("#p2").slideToggle();
  switchBtnText($("#btn2"), isVisible, "Text 2");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="toggleOne()">Text 1 <b>hide</b></button>
<button id="btn2" onclick="toggleTwo()">Text 2 <b>hide</b></button>

<p id="p1">Text _ 1 _</p>
<p id="p2">Text _ 2 _</p>

Upvotes: 2

Related Questions