To start with, this is what I am working on, and I do not know JavaScript ; I only manage to tweak bits of code .
http://codepen.io/Krish1980/pen/ixlGo
Link 1, when clicked , reveals box1, link 2, when clicked, reveals box 2, and so on…For the example I’ve used 3 boxes.
The information in the boxes corresponds to the connecting links. Now, at window width 1260px , the wrapper holding these boxes would be hidden from view. Hence, I’d like to clone the boxes below their respective links when the window width is equal to or smaller than 1260px. Any leads or even alternate suggestions would be greatly appreciated.
Please note: Initially, I had simply placed each box(n) inside the respective lis, and made them visible when the li had a selected class on click. This way using media queries, I coul have simply given the box(n)s a relative position at 1260px and less, and a absolute position (the position currently given to .box-wrap) for window widths greater than this.
However, the introduction of the scrollbar(this is a must for the client for full desktop width) hides all the absolute position elements within the li, since they go out of the boundary of the ul that has been given an overflow:auto, at full desktop widths
