SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show initial content in div

    I'm using this script to open different content in one div: http://www.pmob.co.uk/temp/3col-toggle-content3.htm
    What I would like is to have the first textblock already visible when you open the page.
    Any ideas?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The most simple way to display the first DIV element is to use CSS and the :first-child pseudo selector, see the below example.

    Code CSS:
    #collapseBlock div[id^=text]:first-child {
        display: block;
    }

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your fast reply!
    I'm afraid it didn't work for me though... should I add something to the html?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    hShow = function(nu) {
    	var theTxt = document.getElementById("nav").getElementsByTagName("A");
    	for (var i=0; i<theTxt.length; i++) {
            if (i==nu){
             click(theTxt[i]);
            }
    		theTxt[i].onclick=function() {  click(this); }
    	}
    }
    
    function click(obj){
    		var theRef = obj.getAttribute('href');
    			var hash= theRef.indexOf('#')+1;
    			var theDiv= theRef.substr(hash);
    			theToggleDiv = document.getElementById(theDiv);
    			 var alreadyOn=0;
    			var c = " " + theToggleDiv.className + " ";
    			if (c.indexOf(" " + "over" + " ") != -1){alreadyOn = 1}
    			if (!alreadyOn) {
    			clearClasses();;
    			theToggleDiv.className+=" over"}
    
    }
    
    function clearClasses(){
    var	navRoot = document.getElementById("collapseBlock");
    	for (j=0; j<navRoot.childNodes.length; j++) {
    		var node = navRoot.childNodes[j];
    		if (node.nodeName=="DIV") {
    		var x=node;
    		x.className=x.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    window.onload = function(){ hShow(0);  }  // parameter 0 = the index number of the content to show

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it brilliantly!!
    thanks man


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •