CODEWITHSUNDEEP
javascriptjqueryhtmlcssevents
eatmailyo
eatmailyo

Reputation: 670

Multiple Show/Hide with changing text

I have a multiple show/hide divs with changing texts from Expand to Reduce. If there is more than one dropdown, text doesn't changing. There is my JSFiddle, you can test it, by delete one section. Any solutions for that? :)

This is my JQuery

$(".section .section-title").click(function(){
  $(this).closest(".section").find('.dropdown-content').slideToggle(100);
  $(this).find('.expand').toggleClass('expanded');

  if ($.trim($(".expand").text()) === 'Expand') {
    $(".expand").text('Reduce');
} else {
    $(".expand").text('Expand');        
}

});

Upvotes: 3

Views: 230

Answers (5)

Artur Filipiak
Artur Filipiak

Reputation: 9157

You should find .expand in this (or closest(".section")) :

$(".section .section-title").click(function(){
  $(this).closest(".section").find('.dropdown-content').slideToggle(100).end()
  .find('.expand').toggleClass('expanded').text(function(){
    return $(this).is('.expanded') ? 'Reduce' : 'Expand';
  });
});


$(".section .section-title").click(function(){
  $(this).closest(".section")
    .find('.dropdown-content').slideToggle(100).end()
    .find('.expand').toggleClass('expanded').text(function(){
      return $(this).is('.expanded') ? 'Reduce' : 'Expand';
    });
});
.section .section-title{
    position: relative;
    left: 0;
    right: 0;
    background: #f3f5f9;
    width: 100%;
    height: 48px;
    color: #333;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
    z-index: 1;
}

.section .title{
    margin: 9px 0 0 45px;
    font-size: 22px;
}

.section .title:before{
    position: absolute;
    margin: auto;
    left: 20px;
    top: 0;
    bottom: 0;
    content: "• ";
    color: #a8a8a8;
    font-size: 32px;
    line-height: 48px;
}

.section .dropdown-content{
    display: none;
}

.section .expand{
    position: absolute;
    right: 10px;
    bottom: 3px;
    font-size: 12px;
}

.section .expanded{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section personal-info">
  <div class="section-title">
    <div class="title">Personal info</div>
    <div class="expand">Expand</div>
  </div>
  <div class="dropdown-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum lacus vel posuere placerat. Morbi ligula turpis, accumsan vitae lectus quis, aliquet sagittis est. Ut congue neque enim, et malesuada nisi sollicitudin nec. Morbi eget mauris rutrum, vestibulum orci sit amet, sollicitudin nisi. 
  </div>
</div>

<div class="section residence-address">
  <div class="section-title">
    <div class="title">Other info</div>
    <div class="expand">Expand</div>
  </div>
  <div class="dropdown-content">
    Etiam vestibulum elementum orci sit amet auctor. Vestibulum vel nisl nec velit fermentum convallis vel ut enim. Aliquam imperdiet justo urna, ut efficitur purus ornare ut. Praesent imperdiet venenatis mauris non luctus. Nullam in arcu nec arcu auctor aliquam sit amet at nisl. Donec pharetra, leo ut imperdiet convallis, risu
  </div>
</div>

If there is more than one dropdown, text doesn't changing

This is because $(".expand").text() returns text of all elements with class expand.
In your example returns: "ExpandExpand" and therefore the condition === 'Expand' is not meet.

Upvotes: 2

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

You must find text with class .expand in this,which represents the section clicked.

Use this:

$(".section .section-title").click(function(){
    $(this).closest(".section").find('.dropdown-content').slideToggle(100);
    $(this).find('.expand').toggleClass('expanded');

    if ($.trim($(this).find(".expand").text()) === 'Expand') {
        $(this).find(".expand").text('Reduce');
    } else {
        $(this).find(".expand").text('Expand');        
    }
});

Here is jsfiddle

Upvotes: 4

ScanQR
ScanQR

Reputation: 3820

Try following,

 $(".section .section-title").click(function(){
 $(this).closest(".section").find('.dropdown-content').slideToggle(100);
 $(this).find('.expand').toggleClass('expanded');

 if ($.trim($(this).find(".expand").text()) === 'Expand') {
   $(this).find(".expand").text("Reduce");
 } else {
    $(this).find(".expand").text("Expand");        
 }
});

Upvotes: 1

Husen
Husen

Reputation: 1587

Please change this it will work.

$(this).find($(".expand")).text()

instead of

$.trim($(".expand").text())

Upvotes: 1

Peter M.
Peter M.

Reputation: 58

You are trying to check the text of all elements matching .expand. So if you have more than one dropdown this doesn't work.

Try this one:

$(".section .section-title").click(function(){
$(this).closest(".section").find('.dropdown-content').slideToggle(100);
$(this).find('.expand').toggleClass('expanded');

if ($.trim($(this).find('.expand').text()) === 'Expand') {
  $(this).find('.expand').text('Reduce');
} else {
  $(this).find('.expand').text('Expand');        
}
});

Upvotes: 1

Related Questions