CODEWITHSUNDEEP
javascriptjqueryfor-loop
Dielna Reboot
Dielna Reboot

Reputation: 75

jQuery - for inside for loop

I have tried to create a for loop in jQuery. it has worked!

for (var i = 1; i <= 40; i++) {
    (function(i) {
        $('.infosegment2-1-'+i).click(function() {
            $(".p_expandable").not('.p_expandable2-1-'+i).slideUp();
            $('.p_expandable2-1-'+i).slideToggle('default');
        });
    })(i);
}

When I clicked on infosegment2-1-i it has showed expandable content of it and so on... The thing is that I need to do same with infosegment2_2_i etc...

I wanted to put for inside for... the syntax seems to be OK but it does not work at all...

for (var $b = 1; $b <= 10; $b++) {
    for (var $i = 1; $i <= 40; $i++) {  
        $('.infosegment2-'+$b+'-'+$i).click(function() {
            $(".p_expandable").not('.p_expandable2-'+$b+'-'+$i).slideUp();
            $('.p_expandable2-'+$b+'-'+$i).slideToggle('default');
        });
    }
}

I have used https://jshint.com/ to check what is wrong with my code, this was the output of that site:

Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ($, $b, $i)

I do not know why it counts $ at start of line as variable as well... So I think I have to edit syntax around variables somehow, but I do not know what to do

EDIT: Here is a sample of my HTML:


<div id="content_submenu2">
    <div class=" submenu2_div1 sd">
        <div class="grid gird-cols-1 lg:grid-cols-3 gap-4">

            <div class=" mx-auto bg-black bg-opacity-10 rounded-b-2xl ">                    
                    <img class="infosegment2-1-1 images" src="images/chess-set">  
                    
                    <h3>Chess Set</h3>
                    
                    <div class="p_expandable2-1-1 p_expandable">
                        <p>
                           You have expanded this section by clicking on image.
                        </p>
                    </div>      
            </div>
        <div class="mx-auto bg-black bg-opacity-10 rounded-b-2xl">

        <img class="infosegment2-1-2 images" src="images/checkers">
        <h3>Checkers</h3>
       
        <div class="p_expandable2-1-2 p_expandable">
        <p>
            This is checkers' expandable text
        </p>
        </div>
    
    </div>                        
</div>

I have a grid of photos with h3, and each img is infosegment which after click expands p_expandable div and hides other p_expandable divs .... BTW I am using tailwind and jquery-3.2.1.min.js

Upvotes: 1

Views: 107

Answers (1)

isherwood
isherwood

Reputation: 61055

If all you're after is to expand the paragraph adjacent to each image, and simultaneously contract all open containers, this should do:

$('.images').click(function() {
  const slideEl = $(this).siblings('.p_expandable');

  $('.p_expandable').not(slideEl).slideUp();
  slideEl.slideToggle();
});
.p_expandable {overflow: hidden; display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content_submenu2">
  <div class=" submenu2_div1 sd">
    <div class="grid gird-cols-1 lg:grid-cols-3 gap-4">

      <div class=" mx-auto bg-black bg-opacity-10 rounded-b-2xl ">
        <img class="infosegment2-1-1 images" src="https://via.placeholder.com/80">

        <h3>Chess Set</h3>

        <div class="p_expandable2-1-1 p_expandable">
          <p>
            You have expanded this section by clicking on image.
          </p>
        </div>
      </div>

      <div class="mx-auto bg-black bg-opacity-10 rounded-b-2xl">
        <img class="infosegment2-1-2 images" src="https://via.placeholder.com/80">
        <h3>Checkers</h3>

        <div class="p_expandable2-1-2 p_expandable">
          <p>
            This is checkers' expandable text
          </p>
        </div>
      </div>
    </div>
  </div>

Examples of jQuery accordions are as plentiful as sand on a beach. I suggest you look at a few for ideas.

Upvotes: 1

Related Questions