Question

I have several divs shaped like boxes with questions inside each box. When a user wands over a box the short answer is revealed with a link which is SUPPOSED to populate a lightbox with the long answer. I would like to get the respective long answer to populate in the lightbox but can’t seem to figure out . Also I’m looking to allow the user to scroll through all long answers while in the lightbox.

I currently generate all html from a ruby loop of rails partials. A simplified example of my existing work is found in a jsfiddle here

The existing html:

<div id="about">

    <div class="wsBox what">
        <div class="wsQ">
            <h1>What</h1>
        </div>

        <div class="wsD" style="display: block; display:none">
            <p>what we do short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of what we do.</span></p>
        </div>
    </div>

    <div class="wsBox who">
        <div class="wsQ" style="display: block; ">
            <h1>Who</h1>
        </div>

        <div class="wsD">
            <p>who we are short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of who we are.</span></p>
        </div>
    </div>

    <div style="clear:both; display: block; height: 30px; margin-bottom: 25px"></div>

    <div id="lightBoxOverlay" class="initHide" style="display: none; ">
    <div id="lightBox">
        <a href="#" class="lightBoxClose">Close</a>
        <div id="lightBoxContent"></div>
    </div>
</div>


</div>​​​​​

JS:

$(document).ready(function(){
    $('#about .wsBox').hover(
        function(){
            $(this).find('.wsQ').fadeOut();
            $(this).find('.wsD').delay(200).fadeIn();

        },
        function(){
            $(this).find('.wsD').fadeOut();
            $(this).find('.wsQ').delay(200).fadeIn();
        }

    );

    $('a.lightBoxOpen').click(function(e){
        $('#lightBoxOverlay').fadeIn();
        $(this)

    });


    $('a.lightBoxClose').click(function(e){
        $('#lightBoxOverlay').fadeOut();
    });

});

​

CSS:

#about{


}
.wsBox{
    padding: 5px;
    position: relative;
    border: 2px solid #669900;
    width: 200px;
    height: 150px;
    border-radius: 20px;
    float:right;
    margin: 2%;
      border-radius: 5%;
      box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.wsQ{
    color: green;
    text-align: center;
    line-height: 150px;

}
.wsD{
    height:150px;
    display:none;
    position: absolute;
    top: 50%;
    margin-top:-36px;
}
.wsD .wsFD{
    display: none;
}
.who .wsD{
    margin-top:-50px;    
}

#lightBoxOverlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.6);

}
#lightBox{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background-color: #ffffff;
    padding: 5px;
    border: 2px solid #669900;
    border-radius: 20px;
    margin: 2%;
    border-radius: 5%;
    box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
#lightBox a.lightBoxClose{
    float: right;
    font-size: .75em;
    margin-right: 10px;
}

EDIT
​working on something like this but the content is the links and not the boxes!

$('a.lightBoxOpen').click(function(e){
    $('#lightBoxOverlay').fadeIn();
    var content = $(this).html();

        $('#lightBoxContent').html(content);

});

​

Answer 1

Grap html() of the links parent with:

var content = $(this).parent().html();

or even better:
var content = $(this).closest(‘.wsBox’).html();