-1

I want to build a page with four sub-pages. It automatically starts on the first subpage.

When the user clicks on an other tab from the sub-menu I normally create a diffrent page for it, but now its a large page with just a little change of the content in it.

I found the contents() function in the jQuery documentation, but I don't think thats it.

I was thinking that maybe I should work with an iFrame, because I saw some questions about it on stackoverflow, but I still got no idea how to change the content than.

Also I was wondering if it's still possible than to use 4 diffrent wordpress pages for that.

Thanks :)

Maartje
  • 668
  • 1
  • 8
  • 23
  • I presume someone downvoted this question because it's not clear that you've made any attempt to solve this issue yourself. Look up Ajax and you'll find a lot of tutorials on how to update a page without reloading the entire thing. – Ian Clark Aug 19 '13 at 07:47
  • I've updated my answer with a slightly nicer implementation. – Barrie Reader Aug 19 '13 at 07:53
  • Ian, I searched for it and tried to solve it. But I just didn't know where to seach for exacly.. So, thats why my question may be a bit unclear :( – Maartje Aug 19 '13 at 08:01

1 Answers1

1

You could create everything on one page and use jQuery to hide and show each element:

THE CSS

.hideme { display: none; }
#div1 {
    width: 300px;
    height: 300px;
    background-color: lightgreen;
}
#div2 {
    width: 300px;
    height: 300px;
    background-color: lightblue;
}
#div3 {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

THE HTML

<a href="#" name="div1">div one</a>
<a href="#" name="div2">div two</a>
<a href="#" name="div3">div three</a>

<div id="div1" class="box">Some content 1</div>
<div id="div2" class="box hideme">Some content 2</div>
<div id="div3" class="box hideme">Some content 3</div>

THE JQUERY

$('a').on('click', function() {
    var thisDiv = $(this).attr('name'); //get the name value
    $('.box').css('display','none'); //change all "boxes" to hidden
    $('#' + thisDiv).css('display','block'); //get specific box and unhide
});

Nicer Example: http://jsfiddle.net/neuroflux/W8UQm/4/

Barrie Reader
  • 10,647
  • 11
  • 71
  • 139