How to Expand / Collapse a section of a Web Site and also change the image using JavaScript

Question

EDIT #1

Thanks to the 2 users who responded, their solutions worked great! Something I forgot to mention in the original post was, Is there any way to adjust the user's view so that when the expanded section is collapses by the user, their "view" (or the actual web page) can adjust up to an anchored spot?

ORIGINAL POST

I've got a section of a website that I want to first be collapsed and not able to be viewed by the user. Then, when they hit an arrow on the screen, the hidden content will then display AND the image needs to change from a "down" arrow to an "up" arrow.

I'm able to do this with the below code right now but I have to have two arrows. Can anyone help so that I only have one arrow on screen and it changes based on when the user clicks on it? I'd also like this to be able to be done an infinite amount of times by the user (ie if the user clicks the "down" arrow, the section expands and the arrow changes to an "up" arrow but then when the user hits that "up" arrow the section collapses and the arrow changes back to a "down" arrow. Possible?

<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script> 
<br>

<a href="javascript:sizeTbl('none')"><img src="up_arrow.png"></a> 

<a href="javascript:sizeTbl('block')"><img src="down_arrow.png"></a>

Thanks for any help!

score 2 · Answer 1 · answered Jul 24 '14 at 02:29

I have added your code and created a jsfiddle for you...

changed code:-

function sizeTbl(h) {

    var tbl = document.getElementById('container');
    tbl.style.display = h;
    if (h == "block") {
        document.getElementById('down').style.display = 'none';
        document.getElementById('up').style.display = 'block';
    } else {
        document.getElementById('up').style.display = 'none';
        document.getElementById('down').style.display = 'block';

    }
}

working example:- click to see example:-http://jsfiddle.net/XUjAH/1089/

thanks

Thank you. This works perfectly for what I had in mind. Any chance that when the user collapses the expanded section the page could be adjusted back to a specific spot on the page? — Slider257, Jul 24 '14 at 04:01

jasonscript · Answer 2 · 2014-07-25T01:50:29.013

I've taken out the parameter from your sizeTbl method

Then I'm getting the src property of the image (note I've given it an ID). Depending on the src we can show/hide the table and change the image property

Here's a jsFiddle

<script language="JavaScript" type="text/javascript">
<!--

    function sizeTbl() {

        var tbl = document.getElementById('tbl');
        var icon = document.getElementById('toggle-table');
        if (icon.src === 'down_arrow.png'){

            tbl.style.display = 'block';
            icon.src = 'up_arrow.png';
        }
        else {
            tbl.style.display = 'none';
            icon.src = 'down_arrow.png';    
        }
    }

// -->
</script> 
<br>

<a href="javascript:sizeTbl()"><img src="down_arrow.png" id="toggle-table"></a>

You've added some extra requirements to your question. You've tagged jQuery and this is the easiest solution for this scenario.

Remove the javascript:sizeTbl() from your <anchor> tag. This is known as inline JS and isn't recommended because it means you are mixing your presentation code with your business logic.

You make the <anchor> tag act like a normal anchor tag and attach a click event in the document's ready event.

function sizeTbl() {
    var tbl = document.getElementById('tbl');
    var icon = document.getElementById('toggle-table');
    if (icon.innerText === 'show') {

        tbl.style.display = 'block';
        icon.innerText = 'hide';
    } else {
        tbl.style.display = 'none';
        icon.innerText = 'show';
    }
}

$(document).ready(function(){
    $('#sizeTbl').on('click', sizeTbl);
});

I've created a new jsFiddle that demonstrates this.

Notes:

You need to be using jQuery for this to work
Note that I've given the <anchor> tag an ID. This is so that I can locate it in code

If you have any other comments, the etiquette on SO is to ask new questions. The answers get too long and complicated otherwise

Nice job! This indeed does the trick, though I actually wanted the content hidden at first instead of shown so I swapped around the icon and table displays on the "if" and "then" sections. One other thing I'm going to ask that I forgot to mention originally. Is there any way to adjust the "view" within the user's browser so that when they collapse the section using the "up" arrow the view shifts back up to the top of the section? — Slider257, Jul 24 '14 at 04:00
@Slider257 You can use anchor tags. See [here](http://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) for an example — jasonscript, Jul 24 '14 at 04:09
Thanks for the idea but in your solution I'm unable to use an anchor in the link due to it already having the "javascript:sizeTbl()" bit of code. Know a good way to incorporate an anchor but only when the "collapse" view is clicked? — Slider257, Jul 24 '14 at 16:13
thanks for your updates. I like the idea but I'm having difficulty getting it to work correctly in my scenario given that I want the content to be hidden first and that image changes need to occur when the section is expanded or condensed. Per your recommendation I have opened a new question located here : http://stackoverflow.com/questions/25004013/how-to-adjust-a-users-view-using-javascript-and-anchor-tags Thanks again and if you'd like to comment on the new question I'd be appreciative. — Slider257, Jul 28 '14 at 20:46

How to Expand / Collapse a section of a Web Site and also change the image using JavaScript

2 Answers2