CODEWITHSUNDEEP
javascriptjqueryhtml
Lan
Lan

Reputation: 1892

multiple onclick's in HTML

I have a an HTML page with a list of 20 topics on it. I would like it so that when you click on one of those topics, 2 or 3 articles with links pop up underneath it.

I'm trying onclick but it means writing lots of code as you have to declare all the div styles for each of my topics.

Is there an easy way of doing this?

im currently writing this 20 times, and declaring 60 div styles:

<div class = "mousehand"
id = "show_first"
onclick ="this.style.display = 'none';
document.getElementById('show_second').style.display='block';
document.getElementById('dropdown').style.display='inline';
"> show text </div>

<div class = "mousehand"
id = "show_second"
onclick ="this.style.display = 'none';
document.getElementById('show_first').style.display='block';
document.getElementById('dropdown').style.display='none';
"> hide text </div>


<div id ="dropdown"> this is the text to be shown</div>

Upvotes: 1

Views: 540

Answers (2)

robertc
robertc

Reputation: 75777

As has been mentioned, jQuery can make this very straightforward, but your major code saving is going to come from taking advantage of event bubbling. You can do this is you structure your HTML something like this:

<div id="topics">
    <div class="item">
        <div class="show">
            show text 1
        </div>
        <div class="hide">
            hide text 1
        </div>
        <div class="text">
            this is the text to be shown 1
        </div>
    </div>
    <div class="item">
        <div class="show">
            show text 2
        </div>
        <div class="hide">
            hide text 2
        </div>
        <div class="text">
            this is the text to be shown 2
        </div>
    </div>
</div>

Now instead of attaching an onclick handler to each end every div, attach it to the parent element. To do this with jQuery:

$(window).load(function(){                        //Do this when the page loads
    $('#topics').bind('click', function(event) {  //Find the element with ID 'topics' and attach a click handler
        var t = $(event.target);                  //event.target is the element that was actually clicked, $() gets the jQuery version of it
        if(t.hasClass('show')) {                  //If it is a 'show' element...
            t.siblings('.hide').show();           //...show the other two elements...
            t.siblings('.text').show();
            t.hide();                             //...and hide the clicked element
        }
        if(t.hasClass('hide')) {                  //If it is a 'hide' element...
            t.siblings('.show').show();           //...show the 'show' element...
            t.siblings('.text').hide();           //...and hide the other two
            t.hide();
        }
    });
});

And that's it! Here's a demo.

Upvotes: 1

Purag
Purag

Reputation: 17071

You can accomplish this with some Javascript. Add a ul within the li:

<li>Title
    <ul>
        ...
    </ul>
</li>

Set the inner ul's display to none using CSS. Then using Javascript, make a function that changes the display property of the inner ul to block.

Upvotes: 3

Related Questions