How can I show/hide extra divs depending on data value set?

Question

I have some JavaScript (Jquery) that will show a set amount of div's depending on the data arbitrate in the html.

If attribute set to 3 it will show 3 div's and clicking 'show more' will show all div's

It needs to do this for multiple sections, each with their own data attribute and only show or hide the divs that belong to the section clicked.

My current problem is that all sections are being shown on click and then vanishing as soon as they appear.

The desired effect is to have each section hide and show based on the click individually.

var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
  'use strict';
  //variables

  var _sectorPageStrengths = $('.sectorpage-strengths'),
    _elements = 0,
    // methods
    init,
    _bindShowMore, _bindShowLess,
    _adjustHeigt, _checkElemnt, equalHeight;


  _checkElemnt = function($element) {
    var _vp = INF.global.device.viewportN;

    if (_vp === 0) {
      var count = $element.data('desktop');
      $element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
      if ($element.find('.marg1').length >= (count + 1)) {
        $element.find('.view-all-sectors-btn-container').show();
      } else {
        $element.find('.view-all-sectors-btn-container').hide();
      }
      _elements = count;
    } else if (_vp === 1) {
      $element.find('.marg1:nth-child(n+5)').hide();
      if ($element.find('.marg1').length > 4) {
        $element.find('.view-all-sectors-btn-container').show();
      } else {
        $element.find('.view-all-sectors-btn-container').hide();
      }
      _elements = 4;
    } else {
      $element.find('.marg1:nth-child(n+4)').hide();
      _elements = 3;
    }
  };

  _bindShowMore = function(container) {
    // if data-items, data-infinite is defined, used it
    var _showMore = $('.view-all-sectors-btn');
    _showMore.on('click', function() {
      $('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
      $(this).parents('.sectorpage-strengths').toggleClass('showLess');
    });
  };

  _bindShowLess = function() {
    var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
    _showLess.on('click', function() {
      $('html, body').animate({
        scrollTop: _sectorPageStrengths.offset().top - 35
      }, 700);
    });
  };
  init = function() {
    var EachView = jQuery('.sectorpage-strengths');
    EachView.each(function(index, element) {
      if (_sectorPageStrengths.length > 0) {
        _checkElemnt($(element));
        _bindShowMore(_sectorPageStrengths);
        _bindShowLess();
        $(window).on('load', function() {
          equalHeight();
        });
      }
    });

    $("#loadPDFComponentModal").on('hidden.bs.modal', function() {
      $("#hiddenIframe").html("");
    });
  };

  return {
    init: init
  };
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main</h2>
    </div>
    <div class="row  sectorpage-strengths-list">

      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>

      <div class=" marg1" style="display: none;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>



    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main</h2>
    </div>
    <div class="row  sectorpage-strengths-list">

      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>

      <div class=" marg1" style="display: none;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>



    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>

I'm guessing that most of the code and markup up there is not relevant to this specific problem. Can you simplify? — isherwood
– isherwood, Commented Oct 26, 2018 at 12:46
Also, with variable names like _adjustHeigt and _checkElemnt I wouldn't be surprised if spelling is part of your problem. It matters. — isherwood
– isherwood, Commented Oct 26, 2018 at 12:48
"message": "Uncaught TypeError: Cannot read property 'device' of undefined", when ran, I see that error. Simplify the example or try to fix that issue so we can work on the real question/issue here. — Mark Schultheiss
– Mark Schultheiss, Commented Oct 26, 2018 at 14:16

Kesavan R · Accepted Answer · 2018-10-26 14:21:52Z

1

You are listening all the 'view more' button click in your code. so it causing problem.

Update code

code should handle individual container. The file changes are,

  _checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;

if (_vp === 0) {
  var count = $element.data('desktop');
  $element.find('.marg1').hide();
  if ($element.find('.marg1').length >= (count + 1)) {
    $element.find('.view-all-sectors-btn-container').show();
  } else {
    $element.find('.view-all-sectors-btn-container').hide();
  }
  _elements = count;
} else if (_vp === 1) {
  $element.find('.marg1:nth-child(n+5)').hide();
  if ($element.find('.marg1').length > 4) {
    $element.find('.view-all-sectors-btn-container').show();
  } else {
    $element.find('.view-all-sectors-btn-container').hide();
  }
  _elements = 4;
} else {
  $element.find('.marg1:nth-child(n+4)').hide();
  _elements = 3;
}

$element.find('.marg1').slice(0,count).each(function(index, ele){
    $(ele).attr('data-display', true).show();
});

};

and

  _bindShowMore = function(container) {
  var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
   var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
  $(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
  $(this).parents('.sectorpage-strengths').toggleClass('showLess');
  $(this).text(isAllVisible ?'view more' : 'view less');
    if(isAllVisible){
        console.log('isAllVisible', isAllVisible); // you handle some other action here if required
    }
});

};

and

  init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
  if (_sectorPageStrengths.length > 0) {
    _checkElemnt($(element));
    _bindShowMore(element);
    // _bindShowLess(); this behaviour handled in bindShowMore itself
    $(window).on('load', function() {
      equalHeight();
    });
  }
});

i hope this will help you.

edited Oct 26, 2018 at 14:21

answered Oct 26, 2018 at 13:16

Kesavan R

7111 gold badge5 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kesavan R Over a year ago

oops i thought u facing problem with show / hide issue. let me know more about your issue then i can help you

Beep Over a year ago

will do, am testing atm as your answer has helped with a few things so +1

Beep Over a year ago

So on click show more all divs should show on the selected div, on close hide all except the amount said in data-desktop

Beep Over a year ago

The problem with the updated code you added. If i expand it shows div 1,3 and 4. it misses the second.

Mark Schultheiss Over a year ago

This can be much more simply done - note I know it was that way in the original OP question but still.

|

Mark Schultheiss · Accepted Answer · 2018-10-26 18:19:34Z

Here I bypass your code to just provide the simplest answer to the actual issue. I will leave it to you to work that in your code.

NOTE If you choose to not use a class you can do .toggle(true); instead of .toggleClass('hidden', true);

I used a class to simplify the original HTML.

$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
  var sect = $(event.delegateTarget);
  var sectCount = sect.data('desktop');
  var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
  strengths.toggleClass('hidden', false);
  var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
  strengths.slice(0, showCount).toggleClass('hidden', true);
  $(this).toggleClass('hidden', true);
  $(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});

.sectorpage-strengths .marg1 {
  border: solid lime 1px;
}

.yellow-container {
  height: 140px;
  background-color: #FFFFE0;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main1</h2>
    </div>
    <div class="row  sectorpage-strengths-list">
      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading1 1</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
      <div class=" marg1 hidden">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading1 2</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main2</h2>
    </div>
    <div class="row  sectorpage-strengths-list">
      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading2 1</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
      <div class=" marg1 hidden">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading2 2</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>

Collectives™ on Stack Overflow

How can I show/hide extra divs depending on data value set?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related