Click here to Skip to main content
14,929,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have the following function which shows me elements and starts to show shore more wich when clicks displays all the list

i am trying to save its state in a browser when i have the show more clicked, it should save its state and upon page load should display all

this is my function

JavaScript
function slt(LessMore)
{
   var smH = 0;
    $(document).find('.sl > dd:lt(3)').each(function () {
        smH += $(this).outerHeight();
    });

    $('.sl').css({
        'max-height': smH + 34,
        'overflow': 'hidden'
    });
}


html code

HTML
<dl class="sl" style="max-height: 34px; overflow: hidden;">
          <dt>Life</dt>
                    
              <dd>
                <label>
                    
                    <input type="checkbox">
                  
                  <div>Local <span>(4)</span></div>
                </label>
              </dd>
                    
              <dd>
                <label>
                    
                    <input type="checkbox" value="">
                  
                  <div>Sports <span>(4)</span></div>
                </label>
              </dd>
                    
              <dd>
                <label>
                    
                    <input type="checkbox" value="">
                  
                  <div>Origin <span>(9)</span></div>
                </label>
              </dd>
                    
              <dd>
                <label>
                    
                    <input type="checkbox" value=" Free">
                  
                  <div> Free Tickets <span>(9)</span></div>
                </label>
              </dd>
                    
              <dd>
                <label>
                    
                    <input type="checkbox" value=" Free">
                  
                  <div> Free Pages<span>(8)</span></div>
                </label>
              </dd>
                   
             
       </dl>
       
       <div class="branc_btn"><a href="#" onclick="slt(1);return false;">See More</a> <a href="#" onclick="slt(1);return false;">See Less</a></div>


What I have tried:

i tried a jquery solution but that is not working as expecting, so i am looking for a javascript fix

JavaScript
function slt(LessMore)
{
   var smH = 0;
const showState = localStorage.getItem('showstate');
    $(document).find('.sl > dd:lt(3)').each(function () {
        smH += $(this).outerHeight();
if (showState == 'true') container.addClass('show-less');
    });

    $('.sl').css({
        'max-height': smH + 34,
        'overflow': 'hidden'
    });
}


but it seems i am doing something wrong
Posted
Updated 18-Mar-21 11:30am

1 solution

I don't see any use of localstorage.setitem. You need to set a localstorate value to true or false when pressing the button.
   
Comments
Gurjit Randhawa 2021 18-Mar-21 20:31pm
   
and that is where i am stuck, looks like the position where i am setting is not valid

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900