弹性框图像选择

Question

I have a window with four images inside a responsive flex grid. I would like when clicking an image, this one gets width=100% covering (or hiding) the others always inside the flexbox.

I guess is with jQuery and JavaScript but I'm not able to find the way. Any help?

Thanks.

 .wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;} .container {box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; float:left;} .half {margin: 0.25rem;} .photo {width: 15rem; max-width:100%; } 

 <div class="wrap"> <div class="container"> <div class="half"> <div id="quarter1"> <a href=""><img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" class="" alt="" title=""></a> </div> <div id="quarter2"> <a href=""><img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" alt="" title="" ></a> </div> </div> <div class="half"> <div id="quarter3"> <a href=""><img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" class="" alt="" title="" ></a> </div> <div id="quarter4"> <a href=""><img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" ></a> </div> </div> </div> </div> 

Answer 1

I have made few changes to your HTML structure. Run the below snippet

 var classname = document.getElementsByClassName("photoContainer"); var containerWidth = document.getElementsByClassName('container')[0].offsetWidth; var myFunction = function(ev) { if(this.classList.contains('expandImage')) { this.classList.remove('expandImage'); for (var i = 0; i < classname.length; i++) { classname[i].classList.remove('hideImage'); } return; } for (var i = 0; i < classname.length; i++) { classname[i].classList.add('hideImage'); } this.classList.remove('hideImage'); this.classList.add('expandImage'); this.style.width = containerWidth; }; for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', myFunction, false); } 

 .wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .container {box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; float:left; position: relative;} .half {margin: 0.25rem;} .photo {width: 15rem; max-width:100%; } .hideImage { display: none } .expandImage > img { width: 100%; } 

 <div class="wrap"> <div class="container"> <div class="half"> <div id="quarter1" class="photoContainer"> <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" class="" alt="" title=""> </div> <div id="quarter2" class="photoContainer"> <img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" alt="" title="" > </div> </div> <div class="half"> <div id="quarter3" class="photoContainer"> <img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" class="" alt="" title="" > </div> <div id="quarter4" class="photoContainer"> <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" > </div> </div>