SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member gameface101's Avatar
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Independant JS Code for HTML show/hide divs

    Hello Site Point! ^,^

    I'm trying to implement a show/hide toggle for each users profile field in the view body topic of my forum.

    I found this thread here @ sitepoint which is close to what I'm working on, but the code I'm working with is different.

    What I need are some changes to the JS so that each show/hide works independently, not just the first instance of the show/hide.

    how do you call this HTML
    Code:
    <center><p>...show/hide testing...<br>
    <a href="#" id="example-show" class="showLink" 
    onclick="showHide('example');return false;"> [SHOW] </a>
    </p></center>
    <div id="example" class="more">
    <center><p>...hidden content...</p>
    	<p><a href="#" id="example-hide" class="hideLink" 
    	onclick="showHide('example');return false;"> [HIDE] </a></p></center>
    </div>
    with this JS to be independent?
    Code:
    function showHide(shID) {
    	if (document.getElementById(shID)) {
    		if (document.getElementById(shID+'-show').style.display != 'none') {
    			document.getElementById(shID+'-show').style.display = 'none';
    			document.getElementById(shID).style.display = 'block';
    		}
    		else {
    			document.getElementById(shID+'-show').style.display = 'inline';
    			document.getElementById(shID).style.display = 'none';
    		}
    	}
    }
    I know that this would have bits of " $(function() and $(this) " but that's about all I know...


    Please help my brain is sore from giving it my best effort.

    forum is PUNBB/forumotion same as my name .com

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gameface101 View Post
    What I need are some changes to the JS so that each show/hide works independently, not just the first instance of the show/hide.
    I don't understand what you mean there. Could you elaborate?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member gameface101's Avatar
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul - I am truly honored by your response.

    To elaborate, only the top (or first) show/hide works, all other show/hides only toggle the top (or first) show/hide.

    I'm 'trying' to get each one to work independently as they will appear below the avatar of each users post.

    here is a screen shot (it's below "connected" and above the icons)



    once this is working, I then can hide all the profile details inside the show/hide

    (such as the flag,OS,browser)

    edit: to see it in action ~>http://gameface101.playogame.com/t1008-hello-everyone

  4. #4
    SitePoint Member gameface101's Avatar
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out! ^,^

    my brain still hurts but my mind is at ease (iykwim...)

    edit:had to use a totally different CSS/and JS function but it works.

    *still I would like to use the code in this request if possible, I like how it looks more...

    ** sorry about the double post, I just couldn't edit the previous post for some odd reason ~?

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I've used this to hide and show elements:

    Code JavaScript:
        function doHide(elementId){
            document.getElementById(elementId).style.display = 'none';
        }
        function doShow(elementId){
            document.getElementById(elementId).style.display = 'block';
        }
        function doShow_inline(elementId){
            document.getElementById(elementId).style.display = 'inline';
        }

    I'm not quite sure if that's what you're looking for or not.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  6. #6
    SitePoint Member gameface101's Avatar
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    I've used this to hide and show elements:

    Code JavaScript:
        function doHide(elementId){
            document.getElementById(elementId).style.display = 'none';
        }
        function doShow(elementId){
            document.getElementById(elementId).style.display = 'block';
        }
        function doShow_inline(elementId){
            document.getElementById(elementId).style.display = 'inline';
        }

    I'm not quite sure if that's what you're looking for or not.
    @forceflow - ^ thanks for sharing! +
    Though I think that code would not work as you would have to assign an ID for each element to toggle, I really do appreciate your response. ^,^

    I was trying to get the HTML code in the original post of this thread to work independently which is why I was looking for an edited solution to the JS.

    As I was trying to explain to Paul, the div appears below the avatar of each post, no matter the number of posts in a thread all show/hide divs will only toggle the top or first show/hide div. I'm looking to toggle each one independently. I was able to find a temporary solution with less features, but I still would prefer getting this one to work.

  7. #7
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gameface101 View Post
    I was trying to get the HTML code in the original post of this thread to work independently which is why I was looking for an edited solution to the JS.
    Can you explain a bit more on what you mean by this? I'm not the only one confused about what you're attempting to do.
    Last edited by Force Flow; May 23, 2011 at 12:18. Reason: typo
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Force Flow View Post
    Can you explain a bit more on what you mean by this? I'm not the only confused about what you're attempting to do.
    The reason why we are puzzled is that we think that the scripting code is already independent.

    See this HTML code, with the following CSS to initially hide them:

    Code css:
    .more {
        display: none;
    }

    Code html4strict:
    <center><p>...show/hide testing...<br>
    <a href="#" id="first-show" class="showLink" onclick="showHide('first');return false;"> [SHOW] </a>
    </p></center>
    <div id="first" class="more" style="display: none;">
    <center><p>...first hidden content...</p>
    	<p><a href="#" id="first-hide" class="hideLink" onclick="showHide('first');return false;"> [HIDE] </a></p></center>
    </div>
    <center><p>...show/hide testing...<br>
    <a href="#" id="second-show" class="showLink" onclick="showHide('second');return false;"> [SHOW] </a>
    </p></center>
    <div id="second" class="more" style="display: none;">
    <center><p>...second hidden content...</p>
    	<p><a href="#" id="second-hide" class="hideLink" onclick="showHide('second');return false;"> [HIDE] </a></p></center>
    </div>
    <center><p>...show/hide testing...<br>
    <a href="#" id="third-show" class="showLink" onclick="showHide('third');return false;"> [SHOW] </a>
    </p></center>
    <div id="third" class="more" style="display: none;">
    <center><p>...third hidden content...</p>
    	<p><a href="#" id="third-hide" class="hideLink" onclick="showHide('third');return false;"> [HIDE] </a></p></center>
    </div>

    Although, I would prefer to remove those inline onclick events, and assign them from scripting instead:

    Code javascript:
    var links = document.getElementsByTagName('a'),
        i,
        link;
    for (i = 0; i < links.length; i += 1) {
        link = links[i];
        if (link.className === 'hideLink' || link.className === 'showLink') {
             link.onclick = function () {
                var id = this.href.split('#')[1]; 
                showHide(id);
                return false;
            }
        }
    }

    And I would also prefer to remove those <center> tags and use CSS instead:

    Code css:
    body {
        text-align: center;
    }

    which results in the following HTML code:

    Code html4strict:
    <p>...show/hide testing...<br>
        <a href="#first" id="first-show" class="showLink"> [SHOW] </a>
    </p>
    <div id="first" class="more">
        <p>...first hidden content...</p>
        <p><a href="#first" id="first-hide" class="hideLink"> [HIDE] </a></p>
    </div>
        <p>...show/hide testing...<br>
            <a href="#second" id="second-show" class="showLink"> [SHOW] </a>
        </p>
    <div id="second" class="more">
        <p>...second hidden content...</p>
    	<p><a href="#second" id="second-hide" class="hideLink"> [HIDE] </a></p>
    </div>
    <p>...show/hide testing...<br>
        <a href="#third" id="third-show" class="showLink"> [SHOW] </a>
    </p>
    <div id="third" class="more">
        <p>...third hidden content...</p>
    	<p><a href="#third" id="third-hide" class="hideLink"> [HIDE] </a></p>
    </div>

    There are other things that can be done to simplify things even further, but this should be enough to demonstrate the independent nature of things.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member gameface101's Avatar
    Join Date
    May 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul - I appreciate your response! It was more difficult for me to explain what I needed than it was to find a way to program it. ^,^

    In your results I see the CSS initial hide for the HTML divs having the 'more' class then the JS toggles the 'hidelink' 'showlink' classes.

    I'll be certain to give this code a try, thanks a lot!

    thank you too Force Flow, just for confusions sake... allow me to clarify once more.

    Forum > Topic Thread

    [ 1 ] <--- avatar first/top post
    === <--- profile field toggle (below avatar)

    [ 2 ]
    === <--- only toggles the profile field in first/top post

    [ 3 ]
    === <--- only toggles the profile field in first/top post

    *using the code in the original post of this thread,
    I was only able to toggle the profile field below the first/top post for every thread in my forum.

    I tend to over think and make things more complicated (a lot), but I was able to keep it simple and I figured it out.

    *still it is not hidden on load, the hidden divs will show for a split second then hide (permissions would be nice too...)

    Any how, this is what I did;

    - I created 1 div with a class 'xo_box',
    - a hidden class 'x' (set to display none in CSS )
    - a visible class "o" (set to display block in CSS )

    then I used the JS to toggle the div with the 'xo_box' class
    by adding / removing the hidden/visible classes

    JS

    Code:
    $(document).ready(function(){
    
    $('.xo_box').addClass("x");
    
    $('.xo_box').click(function() { var $this = $(this);
    
    if ($this.hasClass("x")) { $(this).removeClass("x").addClass("o");
    
    } else { $(this).removeClass("o").addClass("x"); } }); });
    if you want to see it in action ~> the first word you think of

    thanks again for your responses and help.


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
  •