find div after link with JQuery

Hello,
I have simple html with JQuery:

<p><a href="#form_here_1" data-id="my-order">order1</a></p>
<div class="myform">I am first</div>

<p><a href="#form_here_2" data-id="my-order">order2</a></p>
<div class="myform">I am second</div>

<script type="text/javascript">
$(".myform").hide();
$("a[data-id='my-order']").click(function() {
    //alert("click");
   // $(this).find("div").show();
});
</script>

Code (markup):

My task:
When a user clicks on a link to display respectively "I am first" or "I am second".
For starters they are hidden divs. JQuery is little old - 1.4.2

If write $(this).siblings('.myform').text() whithout <p></p> around links, the script will work correctly. How to avoid them <p></p>...

Thanks!

 

Try walk the DOM i.e.
from anchor <a>,
to paragraph <p> as anchor's wrapper,
then to <div> as next sibling:

$('a[data-id="my-order"]').click(function() {
  $(this).parent().next().show();
});

Code (JavaScript):

 

If you don't care about IE8/earlier being able to show/hide, you don't need JS to do this anymore.

Though I have to ask, what makes one word a grammatical paragraph? Also not sure why you're wasting time with data attributes...

<input type="checkbox" id="order1" class="showCheckbox">
<label for="order1">Order 1</label>
<div>I Am First</div>

<input type="checkbox" id="order2" class="showCheckbox">
<label for="order2">Order 2</label>
<div>I Am Second</div>

Code (markup):

Then for CSS something like:

/* hide the checkbox in all browsers */
.showCheckbox {
	position:absolute;
	left:-999em;
}

.showCheckbox + label,
.showCheckbox + label + div {
	display:block;
	padding-bottom:0.5em;
}

/* cute trick for targeting CSS3 browsers only */
@media (min-width:1px) {

	.showCheckbox + label:after {
		content:"+";
		display:inline-block;
		line-height:1.5em;
		width:1.5em;
		margin-left:0.4em;
		text-align:center;
		background:#CCC;
	}
	
	.showCheckbox:checked + label:after {
		content:"-";
	}
	
	.showCheckbox + label + div {
		display:none;
	}
	
	.showCheckbox:checked + label + div {
		display:block;
	}

} /* min-width:1px */

Code (markup):

By using the checkbox as the trigger in CSS3 you can show/hide without getting any scripting involved. By putting the 'display:none' and visible control part into the media query, pre-CSS3 browsers will show them as always open...

Which IMHO right now is where pre IE9 support should be, they don't get the fancy bells and whistles OH WELL. Can they access the content? Good enough!

This is related to something I put up on my website just a few days ago:
http://www.cutcodedown.com/tutorial/mobileMenu

Since I use this exact same methodology to make the show/hide mobile menus since, well... if media queries are firing to hide the menu, you already know CSS3 is present.

Part of why I consider 90%+ of jQuery's codebase to be outdated garbage that should be pitched in the bin... NOT that I see ANY legitimate excuse to ever use ANY of these garbage "frameworks" be it JS, HTML or CSS...

Though even if I were to do it with scripting, that's one giant mess for what I'd be handling with a simple onclick trap and a class swap on a parent container.