I want to build a Drupal 7 website with big squares which contain a title and some text. In a desktop layout there will be 3 rows of 3 squares. Each square is a link to one or more underlaying pages. I am thinking of using the views module to make this work.

After clicking on a square, the content of the underlaying page has to be displayed right under the row of this square. So, if a visitor clicks on a square in the first row, content should be displayed between row 1 and row 2. By clicking on a square in the second row, content should be displayed between row 2 and 3. I have no idea how to do this. Any suggestions would be welcome.

Thanks, Steven

1 Answer 1


What you want to do can be easily accomplished with JavaScript and CSS. And. since Drupal already ships with jQuery, you could make use of the slideToggle() effect to slide up and down your content.

I'll give you a general idea:

  1. In Drupal, create a page that displays your 3 nodes. For example, you could create a View and show the Title and Body fields of your articles.

  2. In your JavaScript, hide the Body field by default and then add a click event to your Title field, so when users click on it, the following Body field slides down or up.

    $('#title-one').click(function() {

Of course, this is just a starting point and one way of doing it. Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.