Greetings! I am facing an issue where I have 3 boxes (divs) containing news articles. Each box has a span with hidden text, and upon clicking the "View More" button, I want to slideToggle the hidden text specific to the clicked box. Initially, I tried assigning variables to each button and span individually, but found this method to be too repetitive and slow. Then, I attempted to use the 'this' selector for better performance, but unfortunately, it did not work as expected. Below is the code snippet:
Check out the JSFIDDLE here
Jquery:
//WORKS
var $span = $('span')[0],$span2 = $('span')[1] ,$span3 = $('span')[2];
var $button = $('button')[0] , $button2 = $('button')[1],$button3 = $('button')[2];
$('span').hide();
$($button).click(function(){
$($span).slideToggle('fast');
});
$('span').hide();
$($button2).click(function(){
$($span2).slideToggle('fast');
});
$('span').hide();
$($button3).click(function(){
$($span3).slideToggle('fast');
});
//DOESNT WORK
$(this).find('button').click(function(){
$(this).find('span').slideToggle();
});
HTML:
<div class="holder">
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
</div>
CSS:
.holder{
width:80%;
margin: 0 auto;
text-align: center;
}
.holder div{
width:25%;
vertical-align: top;
border:1px solid black;
display:inline-block;
padding:20px;
}
button{
padding:10px 20px 10px 20px;
background-color:red;
color:#ffffff;
border:1px solid #000000;
cursor:pointer;
transition:background 0.4s , color 0.5s;
}
button:hover{
border:1px solid #000000;
background-color:#ffffff;
color:red;
}