Using HTML/PHP code inside jquery function

Question

I am trying to learn and still sucking at jquery and javascript and I can't figure out how to really phrase this right to get any useful answers by searching, so here goes.

I have a box with three divs serving as tabs. When each tab is clicked it loads different content into another div. Simple. The below code works, functionality-wise, but I have a feeling it's not very practical or efficient, plus I need to be able to use HTML and PHP inside the tab content which I can't seem to figure out how to accomplish.

My two questions are, is there a way to combine this into a simpler function? And, what is the best way of going about loading HTML and PHP content into the div when each tab is clicked?

HTML:

<div id="single-space-details">
    <div id="space-details-tabs">
        <div class="space-details-tab one">
        Description
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
        <div class="space-details-tab two">
        Specs
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
        <div class="space-details-tab contact three">
        Contact
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
    <div style="clear:both;"></div>
    </div>
    <div id="single-space-tab-content">
        Default Tab one content
    </div>
<div style="clear:both;"></div>
</div>

SCRIPT:

    <script>
$(function() {
    $('.space-details-tab.one').click(function() {
        var tabcontent = "Tab 1 content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});
$(function() {
    $('.space-details-tab.two').click(function() {
        var tabcontent = "Second Tab Test Content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});
$(function() {
    $('.space-details-tab.three').click(function() {
        var tabcontent = "Tab 3 Test Content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});

</script>

Callidior · Accepted Answer · 2014-04-13 09:57:40Z

3

I think, it would be better, especially if you want to show up PHP generated content in your tabs, to have all your tab contents already present in the HTML code instead of setting the content dynamically via JavaScript. You can just hide all but one tabs using style="display: none;" and show the right one when the corresponding tab is clicked.

To associate the tabs with their respective content divs, you could use data attributes. This would also reduce your jQuery code:

$(function() {
    $('.space-details-tab').click(function() {
        $('.space-details-tab').removeClass('active');
        $(this).addClass('active');
        var tabId = $(this).data('tabid');
        $('.single-space-tab-content').each(function() {
            if ($(this).data('tabid') == tabId)
                $(this).show();
            else
                $(this).hide();
        });
    });
});

DEMO

As an alternative, if you do not need to support IE <= 8, you could do this without any JavaScript at all using hidden radio buttons and a combination of CSS pseudo-class (:checked) and sibling (+) selectors.

I also provide a demo for this approach.

edited Apr 13, 2014 at 9:57

answered Apr 13, 2014 at 7:30

Callidior

2,9042 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eckstein Over a year ago

Thank you, this was exactly the type of answer I was looking for. Your first example will work perfectly. Thanks much!

Collectives™ on Stack Overflow

Using HTML/PHP code inside jquery function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related