More masonry questions

I am working off an example found at this codepen
this is what i have so far

I have two questions.
1.why do the boxes not expand. I see no issues in the code. *** they now exapand…ha ha…note to self make sure you link your js scripts *** can i work the code so the text in item-conent is visible only after the box is expanded ?

Awesome they now expand.
however, how could i code this so when one box was expanded the others close?
and am still working on this, “code so the text in item-content is visible only after the box is expanded ?”

I dont see any result?

I just put that up for the code.

but basically am looking at this.

And would like to change it so when you click on one it opens but closes the others.

And so that when it opens it reveals the content be that a paragraph or an image.
So far have not gotten very far. & when i add content to the item-content it displays. A display none nullifies the whole thing.

maybe something like…

jQuery(function( $ ){
var container = $( “.slideup” );

        $( ".trigger" ).click(
            function( event ){

        if ( ":visible" )){
        // Hide - slide up.
        container.slideUp( 200 );
		document.getElementById('2').className = 'basic-info-container';
        } else {
		document.getElementById('2').className = 'panel-fix';
		container.slideDown( 2000 );


slideup being class of container…trigger being the class of a trigger
document.getElementById(‘2’) //// change id to id of panel you want to show
change classname and css for it display:block or similar…
then panel-fix css display:none.

change slidedown animation to 1 that suits your needs

pr0c3ss thank you. I had seen that example last night when googling for possible solutions.
However i need something that doesn’t rely on id as i could wind up w/upward of fifty of them.
So was wondering about creating an array or finding some other solution.

Thank you though.

if so many ids to select… maybe reading this will help

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.