CODEWITHSUNDEEP
jquery
Tessed
Tessed

Reputation: 57

Jquery toggle text on click

I have been trying to solve this, i succeeded somewhat but i'm stuck now.

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 basically trying to accomplish is to toggle the words tonen (meaning open) and verbergen (meaning hide) when slidding the P's up and down. At the moment i append a span with the word tonen and check wether its shown or not.

The content is hidden on load, tonen is shown, but when h4 is clicked, the content is shown but tonen won't change to verbergen. I have read about live and on but don't get it.

<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>

Upvotes: 4

Views: 8844

Answers (4)

Clinton
Clinton

Reputation: 1196

Here is a short script that shows the first paragraph but hides all others unless 'more...' is clicked. It even creates the 'more...' button. All you need to do to use this is wrap the text block (which contains a number of paragraphs) between ... and initiate 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 that this helps

Upvotes: 0

Eli
Eli

Reputation: 14827

You just need to get text of your current child span of clicked h4 and change to opposite text based on retrieved span's text:

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

Updated Fiddle

Upvotes: 4

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

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();

Upvotes: 2

Dan-Nolan
Dan-Nolan

Reputation: 6657

It doesn't look like you ever declared your span variable. You need to select the element you'll be manipulating 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

Upvotes: 1

Related Questions