Aboout selection box

HTML & CSS
1

Hi Guys,

Good day! I like to fix one thing. When clicked/touched anywhere in the selection box, two things happen, the contents of the selection box is shown and the ‘v’ symbol changes in a ‘^’ symbol.

Any help is(GREATLY)appreciated …

Thank you.

2

Is the ^ or V an image right now? Do you have a working example of this currently? If you want the V to change to ^ and have it STAY there until another click happens, you will need JS - CSS can’t do this alone.

However, a CSS dropdown which is what you want - that is easily obtainable with CSS

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Paul always has great examples.

3

If you are looking for ‘click’ funtionality then you will most likely need to this in JS (although there are css tricks that can hide and show content).

What you need to do is use JS to toggle a class on that element and then use css to reveal the content and swap the background image accordingly.

There are loads of tutorials around that show how to do this.

Here’s a jquery version (although jquery is overkill for a small hide and show like this).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<style type="text/css">
#header {
	cursor:pointer
}
#header  b {
	display:inline-block;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #f00;
	border-bottom:none;
}	
#header.active b{
	display:inline-block;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;	
	border-bottom: 10px solid black;
	border-top:none;	
}

</style>
</head>

<body>
<div id="container">
		<h1 id="header"><span>Show Div</span> <b></b></h1>
		<!-- add a wrapper for the slideToggle to take effect -->
		<div id="content">
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
				<p>lorem ipsum dolr sit amet</p>
		</div>
</div>
<script type="text/javascript">
$(function () {
    var myHeader = $("#header");
    var myContent = $("#content");
		myContent.hide();	
    myHeader.click(function () {
        myContent.slideToggle("slow", function () {
            myHeader.toggleClass('active');
						// Animation complete.
            if (myContent.is(':visible')) {
                myHeader.find('span').text('Hide Div');
            } else {
                myHeader.find('span').text('Show Div');
            }
        });
    });
});
</script>
</body>
</html>