Beginners JavaScript Question - Onclick Div

JavaScript
1

Hello

I’ve been trying to learn JavaScript from books for a while. It isn’t really going in. So I am trying to do some. And I don’t know where to start.

Basically I want a drop-down div when someone clicks on the events tab on the top-left menu. I did try to do it by CSS but gathered it isn’t possible.

Can anyone help please?

http://www.jameswinfield.co.uk/v2.html

Thanks
James

2

I looked at your site, but I’m struggling a little to understand what you want the drop-down div to do. Can you do a rough drawing or point us at a site that does something similar to what you need?

3

At the moment, if you click the menu button, you should see that under the events tab, there is a div with some random typing, showing as default.

I would like this hidden by default, and to drop down and show when the user clicks “events”.

I hope that explains it better than my first attempt!

4

Ah! OK, I’d not recognized that as having any particular association with the menu. Hopefully someone will chip in with some ideas, I’m not best placed to respond where I am at the moment.

5

Hi,

You can hide the element using CSS.

Look at the slideToggle() method.

6

Thanks Pullo. I’m getting in the right direction! However it still isn’t working.

I’ve written:

I thought this would do the slide toggle on my div when clicking the events link but it isn’t.

Any idea what I am doing wrong?

http://www.jameswinfield.co.uk/v2.html#

7

Hi,

You have missing the closing bracket from your .eventimage div.

You don’t want to attach a click action to very single list in your page do you? If not then add an id to the one you want to trigger the action.

e.g.

<li id="eventimage"> 
	<a href="#">
		<ul>
				<li><i class="fa fa-calendar"></i></li>
				<li><span>events</span></li>
		</ul>
		<div class="eventimage"> <img src="http://www.jameswinfield.co.uk/event.png" alt="Next Event" height="420" width="300"> </div>
	</a>
</li>

Script.

<script>
$(document).ready(function(){
    $("#eventimage").click(function(){
        $(".eventimage").slideToggle();
    });
});
</script>

You can hide the div to start with using css.

.eventimage {
	display:none
}

You have css comments in the html which is not allowed.
This is a css comment:

/* this is a css comment and only goes in css files */

This is an html comment:

<!-- this is an html comment and only goes in html files -->

Note that you are toggling the .ieventimage div when you click the list item (or when clicking anything inside including the newly displayed div) which means that it will also close when you click it again. If that’s what you wanted then that’s fine.

8

That is amazing, thank you ever so much!

For the next task on building my website, I need to figure out what an API is and how to use one! Wish me luck.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.