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> 

Answer 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.

Answer 2

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>