Que tal tengo un pequeño problema estoy aplicandole jquery a un elemento y necesito que al darle click me oculte el contenedor padre en el que se encuentra y me despliegue el siguiente, pero no puedo hacerlo U_U estoy tratando con esto
Código:
$('.btn-next img').click(function() {
$('.btn-next').parent().slideUp();
$(this).next('article').next('.item-toggle').slideToggle();
});
pero creo que estoy muy perdido
Código HTML:
<section id="contenido_add_initiative">
<h2>lorem</span></h2>
<hr>
<figure class="btn_arriba"></figure>
<article>
<div class="pasos">
<p>paso 1</p>
</div>
<h3>lorem</h3>
<div class="item-toggle">
<div class="cont-pasos">
<input type="text">
<input type="submit">
<p class="small-blue">lorem
<span>
<label for="si">Yes <input type="radio" id="si" name="fd" value="yes" placeholder=""></label>
<label for="nou">No <input type="radio" name="fd" value="no" placeholder="" id="nou"></label>
</span>
</p>
<textarea name="sumary" id="" cols="30" rows="10"></textarea>
</div>
<figure class="btn-next"><img src="img/boton-next.png" alt="Next"></figure>
</div>
</article>
<figure class="btn_arriba"></figure>
<article id="impact-procs">
<div class="pasos">
<p>paso 2</p>
</div>
<h3>lorem</h3>
<div class="item-toggle">
<div class="cont-pasos">
<p>lorem</p>
<div id="op-impact">
<label for="sbu" class="current">lorem<input type="radio" id="sbu" value="sbu" name="impact-process" checked="check"></label>
<label for="business">lorem<input type="radio" id="business" value="business" name="impact-process"></label>
<label for="unit-process">lorem<input type="radio" id="unit-process" value="unit-process" name="impact-process"></label>
</div>
<select name="met-op-sys" id="">
<option value="volvo">lorem</option>
<option value="saab">lorem</option>
<option value="mercedes">lorem</option>
<option value="audi">lorem</option>
</select>
</div>
<figure class="btn-next"><img src="img/boton-next.png" alt="Next"></figure>
</div>
</article>
<figure class="btn_arriba"></figure>
<article id="action-plan">
<div class="pasos">
<p>paso 3</p>
</div>
<h3>lorem</h3>
<div class="item-toggle">
<div class="cont-pasos">
<div>
<p><input type="text" id="datepicker" placeholder="Start date"/></p>
<p><input type="text" id="datepicker2" placeholder="End date"/></p>
</div>
</div>
<figure class="btn-next"><img src="img/boton-next.png" alt="Next"></figure>
</div>
</article>
</section>
al dar click en la imagen boton-next, me oculta el contenedor item-toggle en el que esta el boton al que le di click pero necesito que al mismo tiempo me despliegue el siguiente item-toggle que esta dentro del siguiente article espero que me haya explicado bien, y gracias por la ayuda de antemano, saludos