Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How do I make an expandable and collapsible menu in java script where clicking on one menu will expand the children inside that and collapse other expanded menu(s)?
Besides one of SO's running jokes for an answer, what you're wanting is an accordion menu (maybe not for the effects, but for the containment of the entire menu).
Here's a library-less solution: Javascript And CSS Tutorial - Accordion Menus.
Or, an accordion-specific library/script: http://www.stickmanlabs.com/accordion/
Otherwise, if you're up for using a library and add-ons, there's plenty of options: 10 Javascript Accordion Scripts.
The easiest way to do this is with a jQuery plugin like this one:
http://plugins.jquery.com/project/accordion
in jQuery:
$(".toggle-control").click(function(){
$(".target-div").hide();
$(this).next().show();
});
if your html is something like this:
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 25 days ago.
Improve this question
I can't build accordion on clear css
I have tried a lot of things, but I still can't do it
You can't.
In fact you cant make pretty much anything without HTML (As for Bootstrap is 'just' a wrapper for HTML, CSS and JS.). HTML says where what element is, aka. places the content. CSS defines how it looks and behaves (for the later, you also may need JavaScript).
An accordion in fact needs all three (See this question/answer.)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Actually i am trying to create Animated Banner Ads, same like this...
https://adwords.google.com/aw_displayads/creatives/ExternalPreview?hl=en_US&ad=216127501651&adGroup=50971776412&ocid=141653320&isObfuscatedOcid=false&showMulPreview=true&showVariations=true&creativeType=19&pk=null&sig=ACiVB_ywiD3ua55vbxNzKFKx8nZYtGWJPw
Please guide me how to do this, i have PSDs and need to convert them in Animated Banner Ads HTML.
and also make sure the ads are google adwords compliant and have a working link.
I managed to bring up the page. Most likely you got downvoted because of the vagueness in your "question."
I'm not sure if there are any guides on this particular topic, but I'll let you know how you create a similar effect.
Let's first discuss the elements on the page.
A picture
Some text, "Your social work..."
Learn more button
Blue boxes coming in from the left/right
Not many objects in here. Most likely they are all contained in a single div. In that div, we can assume there is the following:
Background image
6 child Divs for the blue boxes
Another child div for the text "your social work..."
Another child div for the "learn more" button (which is not really a button)
The whole div itself is a link, so that's pretty easy. This should take about 5 minutes to replicate, but here is the overall structure we're looking at:
<a href="www.somelink.com">
<div>
<div></div> // 6 blue boxes
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><p>Your social work...</p></div> // text
<div>Learn More</div> // Fake button
</div>
</a>
Essentially, this is your HTML structure. You can just add transitions/animations to the child elements to gain the effect you see there on the example page you have. You would use transition-delays and animation-delays.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Hello so I would like to make drag and scroll using jquery or javascript.
I was looking on internet for some examples but I couldn't find anything.
Can somebody give me some example of drag and scroll script? (I want use it inside of scroll box)
Kind regards,
Artur
You'd like pep.
very simple. I put together a demo inside a scrolling div for you:
here's a drag-and-scroll demo:
Drag and Scroll
Simple Demo
jquery
$(function() {
$('.container .pep').pep();
});
html
<div class="container">
<div class="pep"></div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
In our application we use A-tags to create all custom styles elements, such as custom CSS buttons.
We alter the A-tags with our CSS and set href='javascript:void(0)'.
The main problem is with Chrome showing the bottom label 'javascript:void(0)' on hover.
Can we just switch all A-tags to button, or is there some major drawback we have consider?
Thanks...
You shouldn't be using an anchor tag in the first place if your anchor tag doesn't point to a URL and is being used as a button. That's sort of like wrapping your text in <b> tags and making it italic.
Making your HTML semantically correct is a good practice, so no, there are no downsides aside from dealing with browsers' default styles for the <button> element.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a website which I want to have a consistent style (a header and a side menu) in every page.
I want to create something similar to a master page for it. I don't want to use frames.
How could I achieve this using HTML, CSS, JavaScript and jQuery?
you can use jQuery Load function to include header or menu html page, for example, to include a common header html file,
<div id="new-header">
<script>
$("#new-header").load("header.html");
</script>
</div>