Olubunmi Olubunmi - 4 months ago 9
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() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})

$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})

$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})

$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})

});//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>

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

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

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

<div id="answer2">
2
</div>

<div id="answer3">
3
</div>

<div id="answer4">
4
</div>

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

Answer

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){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).show();
});

FIDDLE