Question

I use too much jquery

I want to do this with out jquery:

<a onclick="javascript:$(this).next().css('display', 'none')">

I thought it was this:

<a onclick="javascript:this.nextSibling.style.display = 'none'">

But its not. Style returns undefined.

Let me clarify:

I want to do this:

<a class="errorToggle">error</a>
<div style="padding-left:20px;margin:0 0 10px 0;display:none;">

<h4>A PHP Error was encountered</h4>

<p>Severity: <?php echo $severity; ?></p>
<p>Message:  <?php echo $message; ?></p>
<p>Filename: <?php echo $filepath; ?></p>
<p>Line Number: <?php echo $line; ?></p>

</div>

<script type="text/javascript">
  $(".errorToggle").click(function(){
    $(this).next().css("display", "block");
  });
</script>

Without jQuery BECAUSE this is a code igniter error view file that quite often will load before my header does, so I will not have access to jquery. It doesn’t need to be pretty, or well coded, just work. This will not be used in production.

Answer 1

Take a look at this article:
JavaScript nextSibling and Cross Browser Compatibility

Excerpt:

The problem was that we were
referencing the ‘nextSibling’ of an
element in our JS using the onClick
event. In IE this worked great,
however in Firefox the ‘nextSibling’
could be a line break.

You might want to iterate through the “nextSibling()” until you hit what you want.