Question

Hi can someone assist me with altering this coding I’m trying to remove the href page#.html loading and use a preloaded li with the text to populate the sclit div when a link is clicked.

<div id="sclit"></div>
<!-- old code
<a href="page1.html" class="para">Sci Lit 1</a>
<a href="page2.html" class="para">Sci Lit 2</a>
<a href="page3.html" class="para">Sci Lit 3</a>
-->

<ul style="display:none">
<li class="page1"> text text </li>
<li class="page2"> text text </li>
<li class="page3"> text text </li>
</ul>

<script>
jQuery(document).ready(function() {
    jQuery(".para").click(function() {
       // jQuery("#sclit").load(jQuery(this).attr('href')); // old code
        jQuery("#sclit").load(jQuery(this).attr('li'));
    });
});
</script>

Answer 1

I think you’re just trying to eliminate the .load in which case you could do something like this:

http://jsfiddle.net/GgMee/

Change the html markup to this:

<div id="sclit"></div>

<a href="javascript:void(0)" class="para">Sci Lit 1</a>
<div class="details">text for sci lit 1</div>

<a href="javascript:void(0)" class="para">Sci Lit 2</a>
<div class="details">text for sci lit 2</div>

<a href="javascript:void(0)" class="para">Sci Lit 3</a>
<div class="details">text for sci lit 3</div>

Where the details div after each link is hidden and contains the text you want to display when that link is clicked.

Then the jquery is this:

$(function(){
    $(".para").click(function(){
        $("#sclit").text($(this).next(".details").text()); 
    });
});

Clicking on a link, finds the details div after it and puts the text from it into the sclit div.