CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ramesh Ganesan
Ramesh Ganesan

Reputation: 71

jquery first click is not working, further clicks works

Here is my code jquery code... first time click not working, further clicks works and also in iphone safari nothing happening. Do we need to add anything specific to safari browser. Any help will be appreciated.

CSS

p.expand-one {
            cursor: pointer;
        }

        p.content-one {
            display:none;
        }

        p.expand-2 {
            cursor: pointer;
        }

        p.content-2 {
            display:none;
        }

HTML

<div class="sitesection">
    <p class="expand-one" onclick="dostuff('.expand-one','.content-one');" > + Click Here To Display The Content </p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>

    <p class="expand-2" onclick="dostuff('.expand-2','.content-2');"> + Click Here To Display The Content </p>
    <p class="content-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>
</div>

SCRIPT

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script>
  function dostuff(classname1, classname2) {

      $(classname1).unbind().click( function(){
        $(classname2).slideToggle('fast');
        $(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
       });

  }
</script>

Thanks..

Upvotes: 2

Views: 2283

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

It's because you only add the click() event handler after the first call to your doStuff() function. Remove the click() call.

function dostuff(classname1, classname2) {
    $(classname2).slideToggle('fast');
    $(classname1).text(($(classname1).text() == '- Click Here To Display The Content') ? '+ Click Here To Display The Content':'- Click Here To Display The Content')
}

Or better yet, remove the ugly and outdated on* event attributes and attach your events using unobtrusive Javascript. As you're already using jQuery, here's how you do that:

<div class="sitesection">
    <p class="expand"> + Click Here To Display The Content </p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>

    <p class="expand"> + Click Here To Display The Content </p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>
</div>

$(function() {
    $('.expand').click(function() {
        $(this).nextUntil('.expand').slideToggle('fast');
            $(this).text(function(i, text) {
            return text.trim().charAt(0) == '-' ? '+ Click Here To Display The Content' : '- Click Here To Display The Content';
        });
    });
});

Working example

Upvotes: 5

Related Questions