homepage Welcome to WebmasterWorld Guest from 50.17.162.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to set clicked Call to Action?
toplisek




msg:4459393
 11:55 am on May 30, 2012 (gmt 0)

I have defined button, but how to set clicked button with expanded/collapsed menu items? I like to expand UL and LI items using Jquery? Clicked button should expand menu items and collapse.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#calltoactionarea .clickarea {
border-radius: 5px 5px 0 0;
}
#calltoactionarea .clickarea {
border-radius: 5px 5px 0 0;
}
.calltoaction {
border-radius: 5px 5px 5px 5px;
color: #000000;
cursor: pointer;
display: inline-block;
position: relative;
text-decoration: none;
}
/*]]>*/
</style>
</head>

<body>
<div class="#calltoactionarea calltoaction clickarea">Basic features</div>
</body>

</html>

 

companyou




msg:4459618
 9:16 pm on May 30, 2012 (gmt 0)

I think it could be something like:
$('#IdOfTheButton').click(function(e){$('#IdOfTheUlToShow').show();});
$('#IdOfTheUlToShow').mouseout(function(){$(this).hide();});

toplisek




msg:4459787
 8:08 am on May 31, 2012 (gmt 0)

There is nice example:
[mathachew.com...]

Maybe this is the best:

<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {

// Appear/Disappear
$('#menu4 > li > a.expanded + ul').show();
$('#menu4 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
});
$('#example4 .expand_all').click(function() {
$('#menu4 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
});
$('#example4 .collapse_all').click(function() {
$('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
});
}, 250);
});
</script>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved