What is preventing me from displaying my paragraph?

Question

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried:

https://example.com/jsfiddle

HTML

<div class="enzimskiprogramindex herbaprogramindex herbaindex nomargin nopadding container-fluid produkti">
     <div class="maincontainer">
        <div class="row">
              <div class="col-sm-offset-3 col-sm-9">
                <div class="col-sm-1">
                    <img src="img/enzicon.png">
                </div>
                <div class="col-sm-10">
                    <h1 class="ffyanone">Enzimski program prihrane pcela</h1>
                    <p class="paragraphtoggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus ultrices nulla, 
                        id consequat ipsum rutrum eget. Sed eget eros sit amet est mattis ultricies vitae ut nibh. 
                        Vestibulum vitae mi tincidunt, dapibus orci nec, malesuada eros. Duis pellentesque tincidunt 
                        quam, et dignissim dolor laoreet sed. In sed turpis ipsum. Integer elementum, orci eu ultrices 
                        facilisis, justo nisi finibus lorem, fringilla pellentesque elit tortor nec sem
                    </p> 
                </div>
               </div>       
        </div>
    </div> 
</div><!--Closed div indexproducts-->

JS

/* Latest compiled and minified JavaScript included as External Resource */ $(document).ready(function () {
$(".enzimskiprogramindex").on('click', function () {

    $(".paragraphtoggle").not($(this).next(".paragraphtoggle")).slideUp();
    $(this).next(".paragraphtoggle").slideToggle();
    });
});

javascript jquery html css

Answer 1

Answer №1

If the paragraph is not a direct sibling of the element that was clicked, you can use the find() method instead of next(). This will help identify the element within the clicked element.

Additionally, to collapse or hide other paragraphs except the one that was clicked on, you can utilize the siblings() method followed by find() to target specific paragraphs based on their class and then slide them up.

For a live demonstration, you can check out this Demo.

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() {
  $(".enzimskiprogramindex").on('click', function() {

    $(this).find(".paragraphtoggle").slideToggle();
    $(this).closest(".enzimskiprogramindex").siblings().find(".paragraphtoggle").slideUp();
    return false;
  });
});

.enzimskiprogramindex {
  height: auto;
  background-color: #f0952e;
  color: white;
  cursor: pointer;
  border-bottom: 5px solid white;
}
.enzimskiprogramindex .maincontainer {
  padding-top: 25px;
  padding-bottom: 25px;
}
.produkti img {
  margin-top: 15px;
}
.produkti h1 {
  margin-left: 10px;
  letter-spacing: 0.7px;
  font-size: 27px;
}
.paragraphtoggle {
  margin-top: 25px;
  margin-left: 10px;
  text-align: justify;
  display: none;
}
.herbaprogramindex {
  background-color: #71a139;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="enzimskiprogramindex herbaprogramindex herbaindex nomargin nopadding container-fluid produkti">
  <div class="maincontainer">
    <div class="row">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="col-sm-1">
          <img src="img/enzicon.png">
        </div>
        <div class="col-sm-10">
          <h1 class="ffyanone">LOREM IPSUM DOLOR SIT AMET</h1>

          <p class="paragraphtoggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus ultrices nulla, id consequat ipsum rutrum eget. Sed eget eros sit amet est mattis ultricies vitae ut nibh. Vestibulum vitae mi tincidunt, dapibus orci nec, malesuada eros.
            Duis pellentesque tincidunt quam, et dignissim dolor laoreet sed. In sed turpis ipsum. Integer elementum, orci eu ultrices facilisis, justo nisi finibus lorem, fringilla pellentesque elit tortor nec sem</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Closed div indexproducts-->

Answer 2

If the paragraph is not a direct sibling of the element that was clicked, you can use the find() method instead of next(). This will help identify the element within the clicked element.

Additionally, to collapse or hide other paragraphs except the one that was clicked on, you can utilize the siblings() method followed by find() to target specific paragraphs based on their class and then slide them up.

For a live demonstration, you can check out this Demo.

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() {
  $(".enzimskiprogramindex").on('click', function() {

    $(this).find(".paragraphtoggle").slideToggle();
    $(this).closest(".enzimskiprogramindex").siblings().find(".paragraphtoggle").slideUp();
    return false;
  });
});

.enzimskiprogramindex {
  height: auto;
  background-color: #f0952e;
  color: white;
  cursor: pointer;
  border-bottom: 5px solid white;
}
.enzimskiprogramindex .maincontainer {
  padding-top: 25px;
  padding-bottom: 25px;
}
.produkti img {
  margin-top: 15px;
}
.produkti h1 {
  margin-left: 10px;
  letter-spacing: 0.7px;
  font-size: 27px;
}
.paragraphtoggle {
  margin-top: 25px;
  margin-left: 10px;
  text-align: justify;
  display: none;
}
.herbaprogramindex {
  background-color: #71a139;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="enzimskiprogramindex herbaprogramindex herbaindex nomargin nopadding container-fluid produkti">
  <div class="maincontainer">
    <div class="row">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="col-sm-1">
          <img src="img/enzicon.png">
        </div>
        <div class="col-sm-10">
          <h1 class="ffyanone">LOREM IPSUM DOLOR SIT AMET</h1>

          <p class="paragraphtoggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus ultrices nulla, id consequat ipsum rutrum eget. Sed eget eros sit amet est mattis ultricies vitae ut nibh. Vestibulum vitae mi tincidunt, dapibus orci nec, malesuada eros.
            Duis pellentesque tincidunt quam, et dignissim dolor laoreet sed. In sed turpis ipsum. Integer elementum, orci eu ultrices facilisis, justo nisi finibus lorem, fringilla pellentesque elit tortor nec sem</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Closed div indexproducts-->

Answer 3

Answer №2

When trying to find the descendants of the div with the code enzimskiprogramindex that include paragraph paragraphtoggle, it is recommended to utilize the method $.fn.find().

Retrieve the descendants of each element within the current matched elements, filtered by a selector, jQuery object, or element.

$.fn.next() specifically targets the immediately following sibling.

To implement this,

$(this).find(".paragraphtoggle")

is preferred over

$(this).next(".paragraphtoggle")

Answer 4

When trying to find the descendants of the div with the code enzimskiprogramindex that include paragraph paragraphtoggle, it is recommended to utilize the method $.fn.find().

Retrieve the descendants of each element within the current matched elements, filtered by a selector, jQuery object, or element.

$.fn.next() specifically targets the immediately following sibling.

To implement this,

$(this).find(".paragraphtoggle")

is preferred over

$(this).next(".paragraphtoggle")

Answer 5

Answer №3

Here's a potential solution for you:

$(document).ready(function () {
    $(".enzymeindex").on('click', function () {


        $(this).find(".paragraphtoggle").slideToggle();
        $(".paragraphtoggle").siblings(".paragraphtoggle").slideUp();
        return false;
    });
});

DEMO

Answer 6

Here's a potential solution for you:

$(document).ready(function () {
    $(".enzymeindex").on('click', function () {


        $(this).find(".paragraphtoggle").slideToggle();
        $(".paragraphtoggle").siblings(".paragraphtoggle").slideUp();
        return false;
    });
});

DEMO

Answer 7

Answer №4

Here is a suggestion for you to try:

$(".enzimskiprogramindex").click(function(event) {
    $('.enzimskiprogramindex p').not($(this).find('p')).toggleClass("enzimskiprogramindex");
    $(".ffyanone").next("p").slideToggle();
});

Visit this link for a working example.

Answer 8

Here is a suggestion for you to try:

$(".enzimskiprogramindex").click(function(event) {
    $('.enzimskiprogramindex p').not($(this).find('p')).toggleClass("enzimskiprogramindex");
    $(".ffyanone").next("p").slideToggle();
});

Visit this link for a working example.

What is preventing me from displaying my paragraph?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide to accurately accessing form data in Jquery Ajax requests

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Ways to automatically update property value in MongoDB once a particular date is reached

Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

The partition.nodes(root) function in d3.js does not assign values to the x or dx properties of the nodes

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

Concealing a div element if the value is null

Html content overlapping div rather than being stacked vertically

Transferring data from the Server-Side dataTable to a modal | Creating a personalized row button for dataTable

Animate the expansion and shrinkage of a div instantly using jQuery

JQuery can be used to query a JSON array

Angular filter is causing an error message saying "Unable to interpolate," but the filter is functioning as expected

"Counting the clicks on the filter button in React

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

problem with html tags

Having issues with json_decode not functioning correctly after using JSON stringify

Avoiding the use of angle brackets in XSLT语

The image fails to load once the AI-generated image is complete and the response process has concluded

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

Exploring the Power of Destructuring Results in React.js with Apollo