Olubunmi Olubunmi - 1 year ago 64
jQuery Question

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.

When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.

This is the jsfiddle I'm working with.
The webpage I'm working with is here.

Place where am i making the mistake.

The jQuery I'm working with so far looks like this

$(document).ready(function() {




});//end of ready

The HTML I'm working with looks like this :

<div class="new_member_box">
<a href="#" class="question1"><h4>Vision</h4></a>

<div class="new_member_box">
<a href="#" class="question2"><h4>Church History</h4></a>

<div class="new_member_box">
<a href="#" class="question3"><h4>Becoming a Member</h4></a>

<div class="new_member_box">
<a href="#" class="question4"><h4>Pastor-in-Training</h4></a>
<div class="clear" class="question"></div>
<div id="answer1">

<div id="answer2">

<div id="answer3">

<div id="answer4">

<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked

Answer Source

load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :

$('[class^="question"]').on('click', function(e){
    var numb = this.className.replace('question', '');
    $('#answer' + numb).show();


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download