Show more jquery to work with two divs

Question

I found following solution for "show more" functionality that, which works great. I need to enhance this to have two divs to expand/hide simultaneously.

How to create a "show more" button and specify how many lines of text can be initially shown

Below is my updated code that does not work for some reason.

$(".show-more span").click( function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.contentNav");
    var $contentDesc = $this.parent().prev("div.contentDesc");

    var linkText = $this.text().toUpperCase();

    if(linkText === "(SHOW LESS)"){
        linkText = "more...";
        $content.switchClass("showContent", "hideContent", 200);
        $contentDesc.switchClass("showContent", "hideContent", 200);

    } else {
        linkText = "(Show less)";
        $content.switchClass("hideContent", "showContent", 200);
        $contentDesc.switchClass("hideContent", "showContent", 200);
    }
    $this.text(linkText);
});

Thank you.

if the other div have the same class name, change var $this = $(this); to $('.show-more span'); this will show/hide all instead of this context — slashsharp, Oct 09 '15 at 14:30
@Syahrul, thank you for your input; I replaced "var $this = $(this);" with "var $this = $('.show-more span');" but that did not work. — Blaze, Oct 10 '15 at 01:58

Hashy · Answer 1 · 2015-10-10T14:38:07.967

1

Your Code is not working because it cant find the second div, So check your code. To fix it put , var $contentDesc = $this.parent().prev("div.content").prev();.

edited Oct 10 '15 at 14:38

answered Oct 09 '15 at 15:51

Hashy

274
2
10

@Blaze I just edit the post, the solution owner is Hashy ;-) – Adrian Cid Almaguer Oct 10 '15 at 02:08
@Hashy - I tried your suggestion but that did not work. Here is the HTML I'm using. [code]
Description.....

Navigation content

more...
[code] – Blaze Oct 10 '15 at 02:16
@Blaze k, then as per your code you can put $contentDesc = $content.prev(); that will work too – Hashy Oct 10 '15 at 14:32

score 1 · Accepted Answer · answered Oct 10 '15 at 08:43

Your var $contentDesc = $this.prev("div.contentDesc"); change it to var $contentDesc = $content.prev("div.contentDesc");

DEMO

$(function() {
  $(".show-more span").click( function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.contentNav");
    var $contentDesc = $content.prev("div.contentDesc");
    var linkText = $this.text().toUpperCase();

    if(linkText === "(SHOW LESS)") {
        linkText = "more...";
        $content.switchClass("showContent", "hideContent", 200);
        $contentDesc.switchClass("showContent", "hideContent", 200);

    } else {
        linkText = "(Show less)";
        $content.switchClass("hideContent", "showContent", 200);
        $contentDesc.switchClass("hideContent", "showContent", 200);
    }
    $this.text(linkText);
});
  });

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}
.showContent{
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<div class="contentDesc hideContent"> 
  <p>Description</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repudiandae non sit incidunt totam, error optio animi possimus saepe quidem voluptate molestias neque excepturi hic. Omnis, pariatur, aliquid. Facere, alias!</p>
</div>
<div class="contentNav hideContent"> 
 <p>Navigation content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repudiandae non sit incidunt totam, error optio animi possimus saepe quidem voluptate molestias neque excepturi hic. Omnis, pariatur, aliquid. Facere, alias!</p>
</div>
<div class="show-more" style="text-align: center; text-align: center; cursor: pointer;"><span>more...</span> </div>

Show more jquery to work with two divs

2 Answers2