Member Avatar for adishardis

Hi when I click the "hide" div I want the three divs to the right to dissapear and the two to the left stay as they were.

Her's what I have now: http://jsfiddle.net/adishardis/r3eyD/15/

And then I might want a sliding action of the hiding... but that's probably for another forum :)

take care!
/Adam

  • 2 Contributors
  • 3 Replies
  • 94 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by adishardis

Dani AI

Generated

Nice and simple fix by — the underlying issue is the layout model. When some columns are hidden you want the remaining columns to reflow as a single unit rather than leave gaps. Grouping related columns or switching to a more modern layout model makes that behavior predictable and easier to animate.

For new builds prefer Flexbox or Grid instead of floats: they make columns behave as independent, reorderable items and are much simpler to animate. Example pattern (conceptual) for a horizontal layout that can be toggled:

.container { display: flex; gap: 10px; align-items: flex-start; }
.col { flex: 0 0 200px; overflow: hidden; transition: flex-basis .25s ease, opacity .25s ease, transform .25s ease; }
.col.hidden { flex-basis: 0; opacity: 0; transform: translateX(-8px); pointer-events: none; }

Toggle the .hidden class from JavaScript (modern browsers) and the layout will collapse smoothly. If you want a pure-slide (pixel-perfect) effect, animate transform and opacity for best performance; animating width triggers layout work and can be slower on large pages. Note that display: none cannot be transitioned — use visibility, opacity, transform, or flex-basis for animated hiding and then set display at the end of the transition if you must remove the element from the flow entirely.

Accessibility and extra tips:

  • Make hidden content unreachable to assistive tech using aria-hidden="true" and remove focusable children when hidden; see MDN on aria-hidden.
  • Read about animating layout vs. composite-only properties on MDN transitions and flexbox basics.
  • If you prefer jQuery, slideUp/slideDown is handy for vertical hides, but it animates height (layout work): jQuery.slideUp.

If the goal later is a polished slide animation, try animating transform on the element’s inner wrapper while collapsing the flex-basis of the column — that gives a good balance of smooth visuals and acceptable reflow.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

nicely done. so you need any other help or you are good now?

Member Avatar for adishardis

na I'm good, thanks! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.