Expand div onclick of it while others with the same class name remains hidden

programming web dev
1

imgix div probs
imgix div probs.png1142×526 54.3 KB

this is what i want to achieve.
but this is what i have:

    <!-- master image -->
    <div class="ba b--black-20 ph2 pv3 cf pointer">
	   <span>What is a master image?</span>
	   <svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box">
		  <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
	   </svg>
	   <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo">
		  <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
	   </svg>
	   <div class="pa2 open-info">
		    <span class="measure">
		    	A master image is any image used by imgix to create and deliver derivative images. You can store master images in an Amazon S3 bucket, a web folder on your website, or any other addressable web storage location that you control.
		    </span>
	    </div>
	</div>
	<!-- derivative image -->
		<div class="ba b--black-20 ph2 pv3 cf pointer">
	    		<span>What is a derivative image?</span>
	    		<svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box">
			         <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
			</svg>
			 <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo">
			         <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
			 </svg>
			<div class="pa2 open-info">
			      <span class="measure">
			                    	    A derivative image is created in response to an imgix request. We fetch a master image (either from your image location or from our caches) and process, transform, and format it to your specifications into the image that is delivered to your users. Each derivative can have multiple parameters assigned.
			     </span>
			</div>
	    	</div>
	    	<!-- cost change -->
	    	<div class="ba b--black-20 ph2 pv3 cf pointer">
	    		<span>How will my costs change over time?</span>
	    			<svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box">
			               <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
			       </svg>
			        <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo">
			               <path d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"></path>
			       </svg>
			       <div class="pa2 open-info">
			             <span class="measure">
			                    	    Our pricing is designed to grow with you in a way that is easy to understand and predict. You can create as many derivative variations of an image as you need (and use as many parameters per derivative as you want), at no extra cost. We charge for the bandwidth to deliver derivatives to your customers, but not to create them. This means your costs do not change if you suddenly need a new image size or want to take advantage of more features in imgix.
			             </span>
			      </div>
	    		</div>
              </div>

That’s the html, i’m using tachyons css
now i have two svgs one shows downward arrow, then on click it hides and shows up a second svg whic is an upward arrow just like the image.
here’s my Jquery:

$('.open-box').click(function() {
	    	var $target = $(this).next('.open-info');
	    	if ($target.not($target)) {
	            $('.open-box').show();
	            $('.close-box').hide();
	            $('.open-info').hide();
	    	} 
	    		$target.slideToggle();
            	$('.close-box').show();
            	$('.open-box').hide();
		});

But the open-info div is not showing after clicking and things just don’t happen the way i want.
Please any help on this? if you don’t understand, let me know.
You can forget about ma html and do yours.

2

Do you have a live demo of the current state of what you are trying to do? That may be easier to fiddle with :slight_smile:

3

Sounds like your major problem stems from the fact that you’re using jQuery to get all instances of elements with classes like ‘open-box’ rather than just those within your clicked item. You need to change $(...) to $(this).find(...) so that you’re targeting elements within the one clicked and not all matching ones within the document.

4

this is the Fiddle
But i don’t really understand jsfiddle. But that’s all the codes + i’ve imported the css framework needed.

@senocular i don’t understand you.

5

@ConnelBlaze When you say $('.open-box').show();, you’re saying "get ALL elements in the document with the open-box class and show it. This is going to show the open-boxes not only in the box you clicked, but all the open-box elements in all other boxes. You don’t want that (as far as I can tell). You only want to target the open-boxes within the box you clicked. $(this) in the click handler represents the box clicked*. Using find() you can find elements within another element. So in using $(this).find('.open-box') instead of $('.open-box'), you’ll be able to target only the boxes within the box clicked.

* I rushed into thinking $(this) being the box clicked. On further investigation it seems to be just the arrow, so what you really want is something more like $(this).parent(). I made a fiddle showing a working example: https://jsfiddle.net/v2noke23/2/

6

wow that’s it!

@senocular am grateful
Thanks.
This is mine:
cb Fiddle

1 Like