Home/ Questions/Q 6780515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:30:54+00:00

I make this code to show and hide p tag depend on the link

  • 0

I make this code to show and hide p tag depend on the link click but what if i have 100 p and links i want an easier way to make it dynamically 

<div class="example2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
        $('a#toggle-example2').click(function () {
            $('.example2').slideToggle(1000);
            return false;
        });
    });
</script>




<div class="example3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.example3').hide().before('<a href="#" id="toggle-example3" class="button">Open/Close</a>');
        $('a#toggle-example3').click(function () {
            $('.example3').slideToggle(1000);
            return false;
        });
    });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can easily traverse via next() to the next element and toggle it.

    <a href="#" class="button">Open/Close</a>    
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>

<a href="#" class="button">Open/Close</a>   
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>

<a href="#" class="button">Open/Close</a>    
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>


<script type="text/javascript">
$(function() {
    $("a.button").click(function(e) {
        $(this).next().slideToggle(1000);
        e.preventDefault();   // way better than 'return false;'
    });
});
</script>
    • 0