CSS/HTML Link/Markup/code hint, please!
July 6, 2010 7:21 AM   Subscribe

How do I do this in XHTML/CSS? What am I looking for and missing? Looking for a way to link content on my page - with multiple links opened or closed without reloading the page.

OK, so that probably doesn't make sense.

On my site, I have a list of basic links top to bottom centered in the page.

On this particular page, I want it to look like this:

-Page of links
-Click the top link, text appears under it. Maybe two or three paragraphs.
-Click the link again, the text disappears and you are back to just the links themselves. The links are as wide as the element: 300px or so.
-A viewer should be able to to have multiple links open at the same time, not sequential - So maybe the top, fourth, and second-to-last links are opened with text under them.
-The page itself never reloads - the text just toggles between seen/unseen by clicking the link.

Does this make sense? Is it doable? Maybe I am not looking to use links, but something else? I thought about anchors, but I want the text to go away when clicked again.

Understand I am not asking you guys to give me code - I was able to figure enough out over three or four days, but I am lost with this.

What terms should I be looking for to code this?
I am assuming it is something I do in the page's code and not on the stylesheet, but wow. I am lost here.
posted by Tchad to Computers & Internet (9 answers total) 3 users marked this as a favorite
 
Like this? You need to search for jQuery accordian tutorials.
posted by ceri richard at 7:26 AM on July 6, 2010


Sounds like you are talking about something like...this.
posted by circular at 7:31 AM on July 6, 2010


Response by poster: Those get me really, really close. I just need to see if I can have multiples open at once instead of one closing as the other opens.

I was hoping I could do the most basic parts in html, but I am going to need javascript sooner or later - I wasn't planning on going there until it was time to add pics and gallery stuff.

Oh, man. Thank you guys!
posted by Tchad at 7:38 AM on July 6, 2010


You can certainly use jQuery if you want but a basic show/hide toggle is really simple in just plain inline JS, although read the caveats in that thread about the scalability of inline JS.

There's no way to do this in straight HTML. I mean, I suppose you could have the link load the text in an iframe and the hide button just load a blank page in its place. But that's not going to collapse the content area, just make it go blank.
posted by Rhomboid at 7:48 AM on July 6, 2010


Response by poster: There's no way to do this in straight HTML.
Yeah, that is what I figured out, short of coding EVERY Permutation/Combination as a linked page that loads separately but looks like I want it to. As much as I am enjoying this, coding in 100+ pages of the same information seemed like insanity and I thought it best to come here and get the right (or better) answer.

So after I get my basic content pages in, I will hit up the js sites and tutorials. I wish I had time to do it today.

That question Rhomboid links to is shockingly similar to this - I am surprised I couldn't find it.
posted by Tchad at 8:04 AM on July 6, 2010


What you want should be pretty straightforward using jQuery and a couple DIV's (my exact syntax may be off):

<a id="foo" '#foo_info').toggle()">Link to click. My onclick event calls the "toggle()" function in jQuery for the div below.</div>

<div id="foo_info" style="display:none;">Stuff you want to toggle on click. Remember to set display:none initially!</div>

jQuery toggle
posted by mkultra at 8:30 AM on July 6, 2010


Here's a way to do it that also includes bookmarkability. If JavaScript doesn't load, things are just visible. 
<html>
<head>
<title>Simple Links</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#simple-links p:not(.toggleAfter)').hide();
    $('#simple-links p.toggleAfter a').bind('click', function(){
        $(this).toggleClass('open');
        var elems = $(this).parent('p').nextUntil('p.toggleAfter');
        if (elems.is(':visible')) { elems.hide(); } else { elems.show(); }
        var newhash = $("#simple-links p.toggleAfter a.open").map(function(){
            return $(this).attr('href').substr(1);
        }).get().join(',');
        location.hash = (newhash.length > 0) ? '#' + newhash : '';
        return false;
    });
    $.each(location.hash.substr(1).split(','), function(index, value){
        $('#simple-links a[href="#'+value+'"]').trigger('click');
    });
});
</script>
</head>
<body>
    <div id="simple-links" align="center">
        <p class="toggleAfter"><a href="#basic-1">Basic 1</a></p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
        <p class="toggleAfter"><a href="#basic-2">Basic 2</a></p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
        <p class="toggleAfter"><a href="#basic-3">Basic 3</a></p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
        <p class="toggleAfter"><a href="#basic-4">Basic 4</a></p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
            <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </p>
    </div>
</body>
</html>

posted by artlung at 9:58 AM on July 6, 2010


Response by poster: You guys are the best. I have spent the past two days reading about javascript and am trying to figure out what I want to do with it. Turns out my original idea is going to be the tip of the iceberg. I had no idea how straightforward this is. Not outright easy, but pretty straightforward.

The code artlung posted does indeed work well for simple links - really well. I am playing around with the other snippets you guys gave in this thread and the other as well.

I am now trying to figure out how to put tables and other links in the toggled areas - they don't want to work - either the table overrides the text or the links want to take the qualities of the link they are in and it looks bad and stalls, then seems to disable itself.

I found a glut of current js textbooks at the thrift store, so I should be able to have this figured out by tomorrow morning.

I'm just so damn grateful. Thanks.
posted by Tchad at 1:41 PM on July 8, 2010


If you're putting in other kinds of tags as content it might be as simple as: changing: 
$('#simple-links p:not(.toggleAfter)').hide();
to
$('#simple-links *:not(.toggleAfter)').hide();

posted by artlung at 1:56 PM on July 8, 2010


« Older Are cough drops causing me to leak?   |   Where Are The Coal Miner's Daughters? Newer »
This thread is closed to new comments.