Adding linking lines between two elements using css / jQuery

Question

I have created a wizard like UI(below screenshot). But I am not sure how to add a line linking point 1 to 2, highlighted withing the red box, when the user on the step 1 presses next and navigates to step 2. Is it possible using CSS / jQuery? I googled up but couldn't find anything on how to go about this. Any pointer on how to do this will also be helpful. Thanks! ```

1

step 1

2

step 2

3

step 3

Accepted Answer

here's a quick fiddle for you. You'll have to style it and tweak positioning and all that, but it should get you started.

http://jsfiddle.net/WtPQE/

css

```
.line-linkage {
    width: 92%;
    height: 0px;
    border: 1px solid #000;
    position: relative;
    top: -58px;
    left: 52%;
    z-index: -1000;
}

.hidden {
    visibility: hidden;
}
```

js

```
$('.line-linkage').addClass('hidden');

$('.ft').on( 'click', function () {
    $(this).parent().next('.line-linkage').toggleClass('hidden');
})
```

Adding linking lines between two elements using css / jQuery

Solution

Problem