Affecting divs in javascript [duplicate]

Question

Affecting divs in javascript [duplicate]

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have two div with #bodyProduct , and within each has div with a div with a #btn-extende .

A% of parent product has a div fixed with overflow , hiding the rest of the contents of it, and the height button serves exactly to extend this extende to% auto_%, to show all content, but the problem is that when I put the system to work by clicking on the first div , it works, but when I click on the second height , it instead of extending the btn-extende to which it is inserted, it extends the first btn with div .

How do I affect only the% of parent% of the div that is tight?

<div id="bodyProduct">
     <div id="btn-extende">

     </div>
</div>

<div id="bodyProduct">
     <div id="btn-extende">

     </div>
</div>



<style>
      #bodyProduct{
        position: relative;
        width: 960px;
        height: 295px;
        margin: 20px 60px;
        display: block;
        overflow: hidden;
      }
      #btn-extende{
        z-index: 9999;
        position: absolute;
        width: 35px;
        height: 18px;
        background-color: #555;
        bottom: 6px;
        right: 6px;
        overflow: hidden;
      }
</style>

$('btn-extende').on('click', function(){
     $('#bodyProduct').css('height', 'auto');
 });

javascript

asked by anonymous 16.05.2018 / 02:24

2 answers

Generate Script MySql Workbench Save the contact, email, and phone when clicking on a link

score 1 · Answer 1

Only use id for a single element on the page. For a list of repeated elements that will have the same styles, use class .

Transform the id s #bodyProduct and #btn-extende into classes: .bodyProduct and .btn-extende . In addition to being the correct form, there will be no formatting problem since all the elements with these classes will have the same styles.

As you are using jQuery, use the code below to expand the div to the click on the "button":

$('.btn-extende').on('click', function(){
   $(this)
   .parent()
   .css('height', 'auto');
});

See:

$('.btn-extende').on('click', function(){
   $(this)
   .parent()
   .css('height', 'auto');
});

.bodyProduct{
  position: relative;
  width: 400px;
  /* width: 960px; */
  height: 20px;
  margin: 20px 60px;
  display: block;
  overflow: hidden;
}
.btn-extende{
  z-index: 9999;
  position: absolute;
  width: 35px;
  height: 18px;
  background-color: #555;
  bottom: 6px;
  right: 6px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="bodyProduct">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <div class="btn-extende">
   </div>
</div>

<div class="bodyProduct">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <div class="btn-extende">
   </div>
</div>

score 0 · Answer 2

One thing I noticed is that when you use id to fetch your JavaScript reference, jQuery -or the browser itself- treats only a single element, that is, the first with that specific id .

To resolve this issue I used the class attribute on the buttons, so the two are recognized by the script.

Instead of looking for the parent element by id event (what I would find the first element even though it was outside), I put the reference of the parent element by the parentNode attribute through the event scope object (this).

View on Codepen

$('.btn-extende').on('click', function(event){
  var parent = $(this.parentNode)
  
  let height = parent.css('height')
  
  parent.css('height',
    (height === '40px') ? 'auto' : '40px'
  )
 });

 #bodyProduct{
   position: relative;
   width: 300px;
   height: 40px;
   margin: 20px 60px;
   display: block;
   overflow: hidden;
}

.btn-extende{
  z-index: 9999;
  position: absolute;
  width: 35px;
  height: 18px;
  background-color: #555;
  bottom: 6px;
  right: 6px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="bodyProduct">
  <div class="btn-extende"></div>
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mi ut odio imperdiet gravida. Mauris vitae pretium velit, at pulvinar ante. Suspendisse eget mollis metus, ut convallis elit. Vestibulum ac purus et lectus rhoncus vulputate. Vivamus ornare efficitur odio in mollis. Quisque suscipit interdum magna, nec feugiat nibh volutpat ut. In id posuere ante. Morbi fermentum, quam ut aliquet elementum, mi metus rhoncus orci, sed tristique urna neque eu diam. Maecenas vehicula mauris eu pulvinar maximus. Donec in nisl velit. Sed vestibulum dui ut finibus aliquet. Fusce pulvinar felis arcu, at suscipit nisi aliquet in. Quisque pharetra nunc sit amet sodales interdum.
</div>

<div id="bodyProduct">
  <div class="btn-extende"></div>
  
  Sed magna ipsum, sagittis vehicula metus et, pharetra rhoncus neque. Vivamus leo libero, rutrum ac egestas vitae, volutpat eu justo. Quisque tempor convallis odio, vel feugiat tellus blandit semper. Etiam non tempus orci, non finibus orci. Vivamus sollicitudin nibh nec orci fermentum condimentum. Suspendisse vel viverra felis, vel placerat ante. Phasellus ornare sagittis sollicitudin. Etiam interdum feugiat ornare. Duis suscipit justo in aliquam porttitor. Morbi ut mi et velit pretium ornare vitae vitae dolor. Donec nibh felis, elementum nec hendrerit id, cursus sed ante. Aenean tempor tempor purus, id consequat nunc commodo sit amet.
</div>