Hi,
You have a number of problems there but the main one is that you are using multiple ids for the repeating sections of text. IDs are unique so the js will only ever find one of them and the others will be ignored.
The second problem is that your elements on the other slides are hidden by default so the js won;t find them when initialised. You need to use .on in jquery and use a target that already exists in the page and then it will work on dynamically added elements.
Your js is too verbose and you need to automate it better.
If you change the ids to classes and supply the destination in data attributes you can reduce the js to just a few lines.
e.g.
You can remove this:
$(document).ready(function() {
$("#whybutton").click(function() {
$(".thebox").show("slow");
$("#langtext").hide("fast");
$("#challtext").hide("fast");
$("#futuretext").hide("fast");
$("#whytext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#langbutton").click(function() {
$("#whytext").hide("fast");
$("#challtext").hide("fast");
$("#futuretext").hide("fast");
$(".thebox").show("slow");
$("#langtext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#challbutton").click(function() {
$("#whytext").hide("fast");
$("#langtext").hide("fast");
$("#futuretext").hide("fast");
$(".thebox").show("slow");
$("#challtext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#futurebutton").click(function() {
$("#whytext").hide("fast");
$("#challtext").hide("fast");
$("#langtext").hide("fast");
$(".thebox").show("slow");
$("#futuretext").delay(200).fadeIn(800);
});
});
and just use this:
$("#slide-window").on("click", ".toggleDiv", function() {
var activeTab = $(this).data("destination"); //Find the destination from a data attribute
var theTarget = $(this).closest('.thebuttons').next('.thebox');
$('.showDiv,.thebox').hide();// hide all of them
theTarget.show();// show this box
theTarget.find(activeTab).show();//show this p element
return false;
});
That’s about an 80% reduction in code.
Then the html would need to look like this:
<div id="slide-window">
<ol id="slides" start="1">
<li class="slide color-0 alive" style="background-color: blue">
<p class="websitename">James Winfield - DJ Page</p>
<a href="http://www.jameswinfield.co.uk/" class="screenshot"><img src="jameswinfield.png"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-1" style="background-color: green">
<p class="websitename">Ubereadoolische</p>
<a href="http://www.ubereadoolische.com" class="screenshot"><img src="uber.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-2" style="background-color: red">
<p class="websitename">Canvas And Prints Kirdford</p>
<a href="http://iwillbeawebdeveloper.co.uk/cap/index.html" class="screenshot"><img src="cap.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-3" style="background-color: pink">
<p class="websitename">I Need A Weather Forecast</p>
<a href="http://ineedaweatherforecast.co.uk/" class="screenshot"><img src="inawf.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 2?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-4" style="background-color: yellow">
<p class="websitename">Dark Matter Events</p>
<a href="http://www.darkmatterartists.com/events/" class="screenshot"><img src="dmp.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 3?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-4" style="background-color: purple">
<p class="websitename">Random Fruit Generator</p>
<a href="http://randomfruit.co.uk/" class="screenshot"><img src="rfg.JPeG"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 4?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
</ol>
The js looks at the data attribute on the button to find the class of which element to show and it shows only the one that is within the next block.
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
Therefore you only need to set up a click event for that one class and then you can find the target easily. All the html is set up the same for each block.
here is your page as a working example although I have not touched your css or tidied anything else up apart from the code in question.
<!doctype html>
<head>
<title>I Will Be A Web Developer</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.iwillbeawebdeveloper.co.uk/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://iwillbeawebdeveloper.co.uk/v2/style.css">
<meta name="description" content="I Will Be A Web Developer - Profile For James Winfield">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.thebox {
top:0
}/*for testing*/
</style>
</head>
<body>
<div id="slide-window">
<ol id="slides" start="1">
<li class="slide color-0 alive" style="background-color: blue">
<p class="websitename">James Winfield - DJ Page</p>
<a href="http://www.jameswinfield.co.uk/" class="screenshot"><img src="jameswinfield.png"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-1" style="background-color: green">
<p class="websitename">Ubereadoolische</p>
<a href="http://www.ubereadoolische.com" class="screenshot"><img src="uber.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-2" style="background-color: red">
<p class="websitename">Canvas And Prints Kirdford</p>
<a href="http://iwillbeawebdeveloper.co.uk/cap/index.html" class="screenshot"><img src="cap.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-3" style="background-color: pink">
<p class="websitename">I Need A Weather Forecast</p>
<a href="http://ineedaweatherforecast.co.uk/" class="screenshot"><img src="inawf.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 2?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-4" style="background-color: yellow">
<p class="websitename">Dark Matter Events</p>
<a href="http://www.darkmatterartists.com/events/" class="screenshot"><img src="dmp.jpeg"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 3?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
<li class="slide color-4" style="background-color: purple">
<p class="websitename">Random Fruit Generator</p>
<a href="http://randomfruit.co.uk/" class="screenshot"><img src="rfg.JPeG"/></a> <br>
<div class="thebuttons">
<button data-destination=".whytext" class="toggleDiv flexbutton button-3d" >Why Build It 4?</button>
<button data-destination=".langtext" class="toggleDiv flexbutton button-3d" >Languages/Frameworks</button>
<button data-destination=".challtext" class="toggleDiv flexbutton button-3d" >Challenges Experienced</button>
<button data-destination=".futuretext" class="toggleDiv flexbutton button-3d">Future Developments</button>
</div>
<div class="thebox">
<p class="showDiv whytext">i WILL WRITE a load of stuff in here soon</p>
<p class="showDiv langtext">this is lang lang lang lang lang lang</p>
<p class="showDiv challtext">oh my word this was so so hard</p>
<p class="showDiv futuretext">In the future the future will be future</p>
</div>
</li>
</ol>
<div class="navbuttons"> <span class="nav fa fa-angle-left fa-3x" id="left"></span> <span class="nav fa fa-angle-right fa-3x" id="right"></span> <span class="fa fa-heart fa-1x" id="bottomleft"></span> </div>
<!-- <div id="credit">Websites By James Winfield<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div>-->
</div>
<nav class="menu">
<p>James Winfield <a href="#">More About Me</a> </p>
</nav>
<script>
$.global = new Object();
$.global.item = 1;
$.global.total = 0;
$(document).ready(function()
{
var WindowWidth = $(window).width();
var SlideCount = $('#slides li').length;
var SlidesWidth = SlideCount * WindowWidth;
$.global.item = 0;
$.global.total = SlideCount;
$('.slide').css('width',WindowWidth+'px');
$('#slides').css('width',SlidesWidth+'px');
$("#slides li:nth-child(1)").addClass('alive');
$('#left').click(function() { Slide('back'); });
$('#right').click(function() { Slide('forward'); });
});
function Slide(direction)
{
if (direction == 'back') { var $target = $.global.item - 1; }
if (direction == 'forward') { var $target = $.global.item + 1; }
if ($target == -1) { DoIt($.global.total-1); }
else if ($target == $.global.total) { DoIt(0); }
else { DoIt($target); }
}
function DoIt(target)
{
var $windowwidth = $(window).width();
var $margin = $windowwidth * target;
var $actualtarget = target+1;
$("#slides li:nth-child("+$actualtarget+")").addClass('alive');
$('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)');
$.global.item = target;
$('#count').html($.global.item+1);
}
</script>
<script>/*
$(document).ready(function() {
$("#whybutton").click(function() {
$(".thebox").show("slow");
$("#langtext").hide("fast");
$("#challtext").hide("fast");
$("#futuretext").hide("fast");
$("#whytext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#langbutton").click(function() {
$("#whytext").hide("fast");
$("#challtext").hide("fast");
$("#futuretext").hide("fast");
$(".thebox").show("slow");
$("#langtext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#challbutton").click(function() {
$("#whytext").hide("fast");
$("#langtext").hide("fast");
$("#futuretext").hide("fast");
$(".thebox").show("slow");
$("#challtext").delay(200).fadeIn(800);
});
});
$(document).ready(function() {
$("#futurebutton").click(function() {
$("#whytext").hide("fast");
$("#challtext").hide("fast");
$("#langtext").hide("fast");
$(".thebox").show("slow");
$("#futuretext").delay(200).fadeIn(800);
});
}); */
$(document).ready(function() {
$(".nav").click(function() {
$(".thebox").hide("fast");
});
$("#slide-window").on("click", ".toggleDiv", function() {
var activeTab = $(this).data("destination"); //Find the destination from a data attribute
var theTarget = $(this).closest('.thebuttons').next('.thebox');
$('.showDiv,.thebox').hide();// hide all of them
theTarget.show();
theTarget.find(activeTab).show();
return false;
});
});// end document ready
</script>
</body>
</html>