failing on trying to change specific div width that repeat it self on php

Question

On my PHP project I have some comment box div that repeat it self, how ever every time I want some one who is clicking on it (the div itself), to change the width of the div to 100%, the problem comes here, whenever I try making something like this, it is changing all divs width and not individually to the specific box it self , is there any solution that comes up in your head?

If you want help, we need to see some code. As it is, you're being too vague. — Osuwariboy, May 25 '16 at 14:59

Francisco Romero · Answer 1 · 2016-05-25T18:52:30.147

2

Just set an ID to your div (if you want just to modify only one item in the whole webpage) and make reference to it from JQuery (as you have tagged it).

If you want to modify all the divs in which you click (but only the div in which you click will be changed each time) then you can refer to the class associated to each div.

$( document ).ready(function() {
    $(".div").click(function() {
      $(this).css("width", "100%");
    });
});

html,body{
  width: 100%;
  height: 100%;
}

.div{
  height: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="div"></div>
<div id="id2" class="div"></div>

EDIT: If you want that they will be back to their initial position just do an if statement in your Javascript.

$( document ).ready(function() {
  $(".div").click(function() {
    if($(this).css("width") == "100px")
      $(this).css("width", "100%");
    else
      $(this).css("width", "100px");
  }); 
});

html,body{
  width: 100%;
  height: 100%;
}

.div{
  height: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="div"></div>
<div id="id2" class="div"></div>

edited May 25 '16 at 18:52

answered May 25 '16 at 15:02

Francisco Romero

12,787
22
92
167

`$('.div').click(...)` would make a lot more sense. – Steve May 25 '16 at 15:05
@Steve Totally agree. I misunderstood the question and thought that he want just one in all the document. Fixed. Thanks! – Francisco Romero May 25 '16 at 15:06
No problem. You need to update your answer text to reflect this though (`"Just set an ID..."`) – Steve May 25 '16 at 15:08
@Steve Yes, I was editing it too :) – Francisco Romero May 25 '16 at 15:10
@Error404 what if I want second click will get it back to normal? – s.f.b.h May 25 '16 at 18:07
@s.f.b.h Look at my edit answer :) – Francisco Romero May 25 '16 at 18:52
@Error404 tried using your new function but it seems to work poorly, my div size is flexible so I can't define a size for it, if you have any other ideas it could be nice, thank you. – s.f.b.h May 26 '16 at 17:29
@s.f.b.h try with this [answer](http://stackoverflow.com/questions/14914372/registering-jquery-click-first-and-second-click#answer-14914382) – Francisco Romero May 26 '16 at 17:43

score 0 · Answer 2 · answered May 25 '16 at 15:09

You can use an unique identifier like id or class(apparently) or use event object to find out which DOM element is clicked

Using class

 //probable html
<div class = "abc"></div>
 <div class = "abc"></div>
 <div class = "abc"></div>

JS

$('.abc').click(function(){
     $(this). addClass('a class which will set to 100%') // or use .css
    })

Using Event object

 $('div').on('click',function(event){
   var _target = event.target;
    $(_target).addClass('class which will make it 100%')
})

score 0 · Answer 3 · answered May 25 '16 at 15:09

Add a class to the clicked div and define width of 100% for that class:

HTML:

<div class="comment">Comment 1</div>
<div class="comment">Comment 2</div>

jQuery:

$('.comment').on('click', function() {
    $('.activeComment').removeClass('activeComment');
    $(this).addClass('activeComment');
});

CSS:

.comment {width: 50%;}
.comment.activeComment {width: 100%;}

JSfiddle

failing on trying to change specific div width that repeat it self on php

3 Answers3