JQuery switches text by click

Question

I tried to solve it, I succeeded somewhat, but now I'm stuck.

I have this structure:

<h4>title</h4> <p>text</p> <hr /> <h4>title</h4> <p>text</p> <p>text</p> <hr /> <h4>title</h4> <p>text</p> <hr /> 

What I'm mostly trying to accomplish is to toggle the words tonen (meaning open) and verbergen (which means hide) while shifting P up and down. Right now I am adding a span with the word tonen and checking if it is shown or not.

The content is hidden during loading, the tone is displayed, but when h4 is clicked, the content is displayed, but the tone does not change to verbgen. I read about life and life, but I do not understand.

 <script> $(function(){ $("h4").append("<span> - tonen</span>"); $("h4").nextUntil("hr").hide(); $("h4").click(function () { $(this).nextUntil("hr").slideToggle("fast"); if(span.text() == " - tonen"){ span.text(" - verbergen"); } else { span.text(" - tonen"); } }); }); </script> 

Answer 1

You just need to get the text of your current child span pressed by h4 and change to the opposite text based on the received range text:

 $("h4").click(function () { $(this).nextUntil("hr").slideToggle("fast"); var text = $(this).find('span').text(); $(this).find('span').text(text == " - verbergen " ? " - tonen " : " - verbergen "); }); 

Updated script

Answer 2

LIVE DEMO 1

 $("h4").append(" - <span>tonen</span>").click(function() { var $sp = $('span', this); $(this).nextUntil("hr").slideToggle("fast"); $sp.text( $sp.text()=="tonen"?"verbergen":"tonen"); }).nextUntil("hr").hide(); 

LIVE DEMO 2

 $("h4").append(" - <span>tonen</span><span style='display:none;'>verbergen</span>").click(function() { $(this).nextUntil("hr").slideToggle(400).end().find('span').toggle(); }).nextUntil("hr").hide(); 

Answer 3

It doesn't look like you ever declared your range variable. You need to select the element that you will manipulate, and then it should work:

 <script> $(function(){ $("h4").append("<span> - tonen</span>"); $("h4").nextUntil("hr").hide(); $("h4").click(function () { $(this).nextUntil("hr").slideToggle("fast"); var $span = $(this).find('span'); if($span.text() == " - tonen"){ $span.text(" - verbergen"); } else { $span.text(" - tonen"); } }); }); </script> 

Demo

Answer 4

Here is a short script that shows the first paragraph, but hides all the others if the "more ..." button is not pressed. He even creates a "more ..." button. All you have to do is wrap the text block (which contains several paragraphs) between ... and trigger the script:

 <script> $(function(){ $(".teaser p").eq(0).attr("class","clsTea"); $(".teaser").after("<span class='moreTea'>more...</span>"); $(".clsTea").siblings().css("background-color","yellow").hide(); $(".moreTea").click( function(){ var clktxt = $(".moreTea").text(); $(".clsTea").siblings().toggle(1000,function(){ if (clktxt=='more...'){ $(".moreTea").text('less...'); } else { $(".moreTea").text('more...'); } }); }); }); </script> 

I hope this helps