Jquery toggles not working

[pdxSherpa]

Hello all i have several section where i’d like to use toggles to hide/show info and then masonry so align it.
I have a sample here in this code pen.
http://codepen.io/pdxSherpa/pen/ByyxVB

It is not working. I’ll also add that i’d have several such sections throught one page.
I tried using

.detail .specs{
display:inline-block;
background:#0071c5;
padding:5px;
width:50px;
height:50px;
box-sizing: border-box;
}
.detail .specs img{
display:block;
margin:0px auto;
vertical-align:center;
padding:0px;
}
.detail .specs>p{
display:none;
}
```to hide the text below the images used for toglles & 

.detail .specs p{
display:none;
}

that didn't work either.
Could i please get some advice on how to fix this?
thank you
D

[ralphm]

At the moment, there’s nothing to toggle. If you initially hide the spec- divs, then there’s something to toggle. E.g.

.specs + div {display: none;}

As an aside, don’t include the link the jQuery in the HTML. Click the JS gear icon and choose to include jQuery on the page.

Also, that code is quite inefficient. You don’t need to target each item separately in your code.

[pdxSherpa]

Hi ralph have managed to hide the text i wanted w/

	.rwd.desktop .detail p {
		padding: 10px 5px 5px 5px;
		display: none;
		}

Thanks for the tip on the jquery linking have not used codepen a lot yet.
As for the code i have been told it could be better.
was thinking of this

jQuery(document).ready(function($){

	$(".specs").click(function(onclick){
		 $(this).next("div").toggle("fast");
	});
});

Seems to work could you please offer some advice on improving on it? Also now i can’t seems to reproduce it in the codepen but while i have succsfully hidden the text my images and specs divs that are ‘’’ display:inline-block``` and were doing so before are now stacking up on top of each other.

[pdxSherpa]

ok so i got it to work

/*
*toggles the items off/on or on/off
*/

$(document).ready(function($){

	$(".specs").click(function(onclick){
		 $(this).next("div").toggle("fast");
	});
});

})($.noConflict(true));

however had to put the css back to

		padding: 10px 5px 5px 5px;
		display: block;
		}

as the text was not showing when toggled. & everything is still stacked on top of each other.