Hi, I posted this a few weeks ago but I didn't get any traction. I've been fumbling with it on and off since then, but I'm not getting anywhere. I figured it couldn't hurt to try again.
I think I'm pretty close to getting this to work, but it's not quite there. This is essentially tab functionality, but the initially showing div needs to be randomly chosen. I can either show the random div initially, but then the links don't work. Alternatively, I can make the links work, but then I can't get the random div. The code I'm including shows working links. To (attempt to) show the random div, I'm using this http://www.leftrightdesigns.com/library/jquery/randomchild/ The links use this: http://enure.net/dev/hide-all-except-one/ I was trying to take this part, which shows the first child div of #toggleThis: $('#toggleThis > div:first').attr('id') And substitute this: $('#toggleThis').randomChild() but it doesn't work. Can anybody weigh in and tell me where I'm going wrong? Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Random test</title> <style type="text/css">.hide { display: none; }</style> <script type="text/javascript" src="http://code.jquery.com/jquery- latest.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var hash = window.location.hash; (!hash) ? hideAllExcept('#' + $('#toggleThis > div:first').attr('id')) : hideAllExcept(window.location.hash); $('a.toggle').click(function() { var href = $(this).attr('href'); hideAllExcept(href); }); }); function hideAllExcept(el) { $('#toggleThis div').addClass('hide'); $(el).removeClass('hide'); $('a.toggle').removeClass('active'); $('a[href="' + el + '"]').addClass('active'); } jQuery.fn.randomChild = function(settings) { return this.each(function(){ var c = $(this).children().length; var r = Math.ceil(Math.random() * c); $(this).children().hide().parent().children(':nth- child(' + r + ')').show(); }); }; </script> </head> <body> <ul> <li><a href="#lorem" class="toggle">Lorem ipsum</a></ li> <li><a href="#ut" class="toggle">Ut enim ad</a></li> <li><a href="#duis" class="toggle">Duis aute</a></li> <li><a href="#execepteur" class="toggle">Excepteur sint</a></li> </ul> <div id="toggleThis"> <div id="lorem">Lorem ipsum dolor sit amet.</div> <div id="ut">Ut enim ad minim veniam.</div> <div id="duis">Duis aute irure dolor.</div> <div id="execepteur">Excepteur sint occaecat.</div> </div> </body> </html>
