Back

Technologies:

javascriptjavascript
htmlhtml
jqueryjquery
avatar
Tolerim
a month ago

Reworded: How can I enlarge the list element according to its id?

The FAQ page contains HTML with answer list elements having "display:none" style, which becomes "display:block" on selection of a question. If a user is directed to this page with a specific URL, let's say "http://localhost:8080/services/faq#faq-0", the list with "id" "faq-0" should automatically expand. The current JavaScript code inside Drupal behavior is not working. A possible solution could be adding the required CSS properties using jQuery for the list element with "id" "faq-0" based on the hash value obtained from the URL.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use the following jQuery code to add the required CSS properties to the list element with "id" "faq-0" based on the hash value obtained from the URL: 
$(document).ready(function() {
  var hash = window.location.hash;
  if (hash === "#faq-0") {
    $("#faq-0").css("display", "block");
  }
});
This code will check if the hash value obtained from the URL is equal to "#faq-0". If it is, then it will add the CSS property "display:block" to the list element with "id" "faq-0", which will expand it. I hope this helps! Let me know if you have any other questions.

Sources

jQuery & CSS - Remove/Add display:none - Stack OverflowIs there a selector to exclude display: none elements?CSS display property - W3School
avatar
Tolerim
a month ago
Yes, in order to show the answer to the question with a specific ID, you need to modify its CSS by adding style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true" using jQuery. Here's one way to do it: 
var hash = window.location.hash;
$(hash).css('display', 'block');
$(hash).attr('data-slide-toggle', 'true');
$(hash).attr('style', 'display: block; transition: all 300ms ease-in 0s;');
This code will get the ID of the element to show from the URL hash, and then modify its CSS properties using jQuery's css and attr methods. Note that you can chain the attr methods to set multiple attributes on the element.
;