CODEWITHSUNDEEP
jquerycsshtml-lists
Designedbyjay
Designedbyjay

Reputation: 21

Replace paragraph with another

Here is what I'm after.

I need each one of my LIs to replace the current paragraph inside a div named "moreInfo".

So far, I've tried to give each li an ID and each additional paragraph is set to display none. I've setup a default paragraph and displaying that before clicking any of the tabs (LIs).

<ul class="sideLinks">

    <li id="sideLink1">
        <a href="" >Favorites</a>
    </li>

    <li id="sideLink2">
        <a href="">Scope</a>
    </li>

    <li id="sideLink3">
        <a href="">Concierge</a>
    </li>

    <li id="sideLink4">
        <a href="">Share</a>
    </li>

    <li id="sideLink5">
        <a href=""> Reminders</a>
    </li>
</ul>

This is what I have setup for jQuery so far, however I get an error on the first link for some odd reason. 

$(document).ready(function(){
    $('li#sideLink1').click(function () {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites"));
    });
});

Any help would be greatly appreciated! Thanks!

Upvotes: 2

Views: 195

Answers (5)

Syon
Syon

Reputation: 1614

The event argument was missing, but I don't think that completely resolves the issue. Here's a full markup and example of what I believe you're trying to accomplish.

http://jsfiddle.net/psyon001/zjQy7/

I used the anchor so if js is disabled you can add a no-js class definition to display block and the links would anchor to the text making it degrade more gracefully.

<style>
    #moreInfo p{display:none;}
    #moreInfo p#default{display:block;}
</style>

-

<ul class="sideLinks">
    <li>
        <a href="#favoritesDetail">Favorites</a>
    </li>
    <li>
        <a href="#scopeDetail">Scope</a>
    </li>
    <li>
        <a href="#conciergeDetail">Concierge</a>
    </li>
    <li>
        <a href="#shareDetail">Share</a>
    </li>
    <li>
        <a href="#remindersDetail">Reminders</a>
    </li>
</ul>
<div id="moreInfo">
    <p id="default"></p>
    <p id="favoritesDetail">Favorites description...</p>
    <p id="scopeDetail">Scope description...</p>
    <p id="conciergeDetail">Concierge description...</p>
    <p id="shareDetail">Share description...</p>
    <p id="remindersDetail">Reminders description...</p>
</div>

-

<script>
$('.sideLinks').find('a').on('click', function(e){
    e.preventDefault();
    var $moreInfo = $('#moreInfo'),
        id = $(this).attr('href');
    $moreInfo.find('p').hide();
    $moreInfo.find(id).show();
});​
</script>

Upvotes: 0

Sarcastron
Sarcastron

Reputation: 1527

The error you are getting might be because you aren't passing the event object to the anonymous function.

$('li#sideLink1').click(
    function(event) {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites"));
    }
);

That said, LI tags don't have a default action to prevent and given the provided code, the anchor tag will still have it's default action. You may want to put the click action on the anchor tag instead.

Upvotes: 0

Michael Malinovskij
Michael Malinovskij

Reputation: 1422

jQuery(function($){
    $('li#sideLink1').click(function (event) {
        event.preventDefault();
        $('#moreinfo').html($("p#favorites").html());
    });
});

.html() accepts string as an argument, not jQuery object.

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

Missing argument. You need to pass the event in the function

$('li#sideLink1').click(
    function (event) {
    event.preventDefault();
    $('#moreinfo').html($("p#favorites"));

});

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

You don't define event. Rewrite as:

$("#sideLink1").click(function (event) { ...

Also note that you don't need the element name as part of the selector if you are using an ID. It may even slow the selector down.

Upvotes: 1

Related Questions