CODEWITHSUNDEEP
javascriptjquery
vasekstebra
vasekstebra

Reputation: 13

slideToggle doesn't work properly

I have a problem with this piece of code: HTML

       <h2>Lorem ipsum</h2>
       <p>Lorem ipsum dolor sit amet consectetuer ridiculus pellentesque Nunc libero Lorem. Auctor vel eget Donec adipiscing urna ullamcorper tincidunt enim auctor Vivamus. Pede wisi semper Praesent Sed non orci elit Integer dis et. Sed eu diam vitae et nibh eu interdum dui Nulla suscipit. Non tristique id elit at tempor Curabitur malesuada.</p>
       <span class="hidden fullArticle">
         <p>Lorem ipsum dolor sit amet consectetuer felis urna consectetuer Vivamus         sapien. Auctor nibh vel Fusce tortor habitant penatibus mattis hendrerit tincidunt Nullam. Et ac laoreet quis porta Sed adipiscing quis Nulla justo nibh. In ut Vestibulum tortor ligula dolor dis platea quis malesuada Nam. Eget leo augue sociis Sed Curabitur turpis    Nulla condimentum tortor magnis. Cursus suscipit faucibus ipsum sed.</p>
       </span>
       <p class="link"><a href="#">Show full article</a></p>

jquery JavaScript

    $(function() {

  /* hide full articles*/

  $(".hidden").hide();
  $("span.hidden").removeClass("hidden");

  /* showing and hiding of full articles */
  $(".link a").click(function(e) {
    e.preventDefault();
    var anchor = $(this);
    var article = $(this).parent().prev("span");
    article.slideToggle(1000, function(){
      if (anchor.text() == "Show full article")
        anchor.text("Hide article");
      else
        anchor.text("Show full article"); 
    });    
  });  

});

The result should be that when I click the anchor "Show full article" then the span before it with class fullArticle should slideToggle and the text in anchor should change to "Hide article".

After that when I click the "Hide article" it should slideToggle again and change the text to "Show full article".

But something is wrong and it isn't working properly. Can you give me some solution? Thank for your help. There is also jsFiddle http://jsfiddle.net/zYAcB/18/

Upvotes: 1

Views: 245

Answers (3)

Matt Burland
Matt Burland

Reputation: 45135

Your problem is that a span is inline and you need a block level element for slide to work. You can set your span to display:block or you can replace it with a div.

Upvotes: 0

dimusic
dimusic

Reputation: 4133

It works properly if you just change your <span> element to <div>

http://jsfiddle.net/zYAcB/30/

Upvotes: 2

boz
boz

Reputation: 4908

Have a look at - http://jsfiddle.net/zYAcB/18/

I edited your javascript:

$(function () {
    /* hide full articles*/

    $(".hidden").hide();

    /* showing and hiding of full articles */
    $(".link a").click(function (e) {
        e.preventDefault();
        var anchor = $(this);
        var article = $(this).parent().prev("div");
        article.slideToggle(1000);
        if (anchor.text() == "Show full article") {
            anchor.text("Hide article");
        } else {
            anchor.text("Show full article");
        }
    });
});

And took out the .hidden { display: none; } bit in the css.

As an aside - it isn't semantically correct to have block level elements like <p> inside an inline element like <span> so I changed it to a <div> instead.

Upvotes: 2

Related Questions