By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,441 Members | 1,281 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,441 IT Pros & Developers. It's quick & easy.

how can I create click-down triangles?

P: n/a
I am trying to google for how to create click-down triangles with
either CSS or some other method but not having much luck. It's
probably because my choice of words to describe this is incorrect.
Anyway, what I'm looking for is similar to the click-down triangles in
an OSX Finder window in list mode. Thanks for any help or URL to what
I'm searching for.
Oct 20 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
In article
<d3**********************************@d10g2000pra. googlegroups.com>,
lu*********@gmail.com wrote:
I am trying to google for how to create click-down triangles with
either CSS or some other method but not having much luck. It's
probably because my choice of words to describe this is incorrect.
Anyway, what I'm looking for is similar to the click-down triangles in
an OSX Finder window in list mode. Thanks for any help or URL to what
I'm searching for.
The very simplest thing you can do is make a triangle image in the
closed position and have refer to it in your doc in the usual img
construction way. Make it a link too. When the user clicks it, a new
page with other information comes up but this time with the image of a
down triangle in the same place.

Do you need help in understanding or implementing this?

--
dorayme
Oct 20 '08 #2

P: n/a
On Oct 20, 2:36*pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<d3ab8975-4c11-4e41-8c53-a841a0be1...@d10g2000pra.googlegroups.com>,

*luxor127...@gmail.com wrote:
I am trying to google for how to create click-down triangles with
either CSS or some other method but not having much luck. *It's
probably because my choice of words to describe this is incorrect.
Anyway, what I'm looking for is similar to the click-down triangles in
an OSX Finder window in list mode. *Thanks for any help or URL to what
I'm searching for.

The very simplest thing you can do is make a triangle image in the
closed position and have refer to it in your doc in the usual img
construction way. Make it a link too. When the user clicks it, a new
page with other information comes up but this time with the image of a
down triangle in the same place.

Do you need help in understanding or implementing this?

--
dorayme
Thanks for your reply. I know this can be done the way that I
described it because I've used a Javascript to do it before but it was
kind of crude and I'm looking for something that will do multiple
triangles. This can be seen on e.g. the google gadget for CNN.com.
However, their source code is impossible to read (and I really mean
impossible). :)

Oct 21 '08 #3

P: n/a
In article
<be**********************************@k36g2000pri. googlegroups.com>,
lu*********@gmail.com wrote:
On Oct 20, 2:36*pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<d3ab8975-4c11-4e41-8c53-a841a0be1...@d10g2000pra.googlegroups.com>,

*luxor127...@gmail.com wrote:
I am trying to google for how to create click-down triangles with
either CSS or some other method but not having much luck. *It's
probably because my choice of words to describe this is incorrect.
Anyway, what I'm looking for is similar to the click-down triangles in
an OSX Finder window in list mode. *Thanks for any help or URL to what
I'm searching for.
The very simplest thing you can do is make a triangle image in the
closed position and have refer to it in your doc in the usual img
construction way. Make it a link too. When the user clicks it, a new
page with other information comes up but this time with the image of a
down triangle in the same place.

Do you need help in understanding or implementing this?

--
dorayme

Thanks for your reply.

Is it a reply you understand or not? You do not give any clue in your
answer? Perhaps you are suggesting my proposal is a bit crude? That is
certainly true!

Actually, I mused further on this and you can get a more natural looking
dropping down of the triangle on the second page (after clicking the
first page's "closed" triangle) by having an animated gif on the second
page of a triangle turning clockwise till it reaches a down position.

You then make that animated triangle a link that goes to a third page on
which there is a further animated triangle that turns anti-clockwise to
the "closed" position.

I know this can be done the way that I
described it because I've used a Javascript to do it before but it was
kind of crude and I'm looking for something that will do multiple
triangles. This can be seen on e.g. the google gadget for CNN.com.
However, their source code is impossible to read (and I really mean
impossible). :)
--
dorayme
Oct 21 '08 #4

P: n/a
Thanks for your reply. I know this can be done the way that I
described it because I've used a Javascript to do it before but it was
kind of crude and I'm looking for something that will do multiple
triangles.
It's something easy enough to do via JQuery, if you're not averse to JS.

Sample code - untested, but should work fine.

triangle1.gif = right-pointing triangle image
triangle2.gif = down-pointing triangle image
---------
<script src="...pathTo.../jquery.js"></script>
<script>
$(document).ready(function(){
$(".toClick").click(function () {
var wasClicked = $(this);
if($(wasClicked).attr("src") == 'triangle1.gif') {
$(wasClicked).attr("src","triangle2.gif");
} else {
$(wasClicked).attr("src","triangle1.gif");
}
$(this).siblings(".revealMenu").toggle();
});
});
</script>

<div class="container">
<img src="triangle1.gif" class="toClick">
<div class="revealMenu" style="display: none;">
Menu 1 to reveal...
</div>
</div>
<div class="container">
<img src="triangle1.gif" class="toClick">
<div class="revealMenu" style="display: none;">
Menu 2 to reveal...
</div>
</div>
<div class="container">
<img src="triangle1.gif" class="toClick">
<div class="revealMenu" style="display: none;">
Menu 3 to reveal...
</div>
</div>
Oct 22 '08 #5

P: n/a
On Oct 21, 6:26*pm, "S.T." <a...@anon.comwrote:
Thanks for your reply. *I know this can be done the way that I
described it because I've used a Javascript to do it before but it was
kind of crude and I'm looking for something that will do multiple
triangles. *

It's something easy enough to do via JQuery, if you're not averse to JS.

Sample code - untested, but should work fine.

triangle1.gif = right-pointing triangle image
triangle2.gif = down-pointing triangle image
---------
<script src="...pathTo.../jquery.js"></script>
<script>
$(document).ready(function(){
* * * * $(".toClick").click(function () {
* * * * * * var wasClicked = $(this);
* * * * *if($(wasClicked).attr("src") == 'triangle1.gif') {
* * * * * * *$(wasClicked).attr("src","triangle2.gif");
* * * * *} else {
* * * * * * *$(wasClicked).attr("src","triangle1.gif");
* * * * *}
* * * * *$(this).siblings(".revealMenu").toggle();
* * * * });});

</script>

<div class="container">
* * *<img src="triangle1.gif" class="toClick">
* * *<div class="revealMenu" style="display: none;">
* * * * *Menu 1 to reveal...
* * *</div>
</div>
<div class="container">
* * *<img src="triangle1.gif" class="toClick">
* * *<div class="revealMenu" style="display: none;">
* * * * *Menu 2 to reveal...
* * *</div>
</div>
<div class="container">
* * *<img src="triangle1.gif" class="toClick">
* * *<div class="revealMenu" style="display: none;">
* * * * *Menu 3 to reveal...
* * *</div>
</div>
This is *exactly* what I needed. Many thanks!!!
Oct 29 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.