CODEWITHSUNDEEP
javascriptjquerycsstoggle
Jameson
Jameson

Reputation: 177

function toggle - open all items

guys

I have a following HTML code with wrap (notice-wrap):

<div class="notice-title">
    Title
</div>

<div class="notice-content">
    Content text
</div>

<div class="notice-toggle" value="Hide" onclick="toggle()">
    <a href="#"><img src="../img/icon_rollout.png"></a>
</div>

And Toggle Script

    function toggle() {
    var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
    $('.notice-toggle').val(newStatus);
    if (newStatus == "Show") {
        $("div.notice-content").css('overflow','hidden');
        $("div.notice-content").css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        $("div.notice-content").css('overflow','visible');
        $("div.notice-content").css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?

P.S. I also use Angular

Thanks in advance!

Upvotes: 0

Views: 497

Answers (2)

Dejan Ranisavljevic
Dejan Ranisavljevic

Reputation: 532

What you should do first is move that styling from js to css, and have additional variations of your classes, for example:

.notice-title--toggled {
...
}

.notice-content--toggled {
...
}

.notice-toggle--toggled {
...
}

Now you have good separation of concerns, and your toggle function could just toggle classes for those elements. Also you should put this toggle click handler on document ready, so final result would be:

$(function) {
  $('.notice-toggle').click(function() {
    $('.notice-title').toggleClass('notice-title--toggled');
    $('.notice-content').toggleClass('notice-content--toggled');
    $('.notice-toggle').toggleClass('notice-toggle--toggled');
  });
}

Upvotes: 0

Mario Santini
Mario Santini

Reputation: 3003

Maybe you can just change this:

function toggle() {
    var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
    $('.notice-toggle').val(newStatus);
    if (newStatus == "Show") {
        $("div.notice-content").css('overflow','hidden');
        $("div.notice-content").css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        $("div.notice-content").css('overflow','visible');
        $("div.notice-content").css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

to:

function toggle() {
    var noticeToggleElement = $(this);
    var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
    noticeToggleElement.val(newStatus);
    if (newStatus == "Show") {
        noticeToggleElement.css('overflow','hidden');
        noticeToggleElement.css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        noticeToggleElement.css('overflow','visible');
        noticeToggleElement.css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

As you should have the context of the element you toggle on with the mouse click.

As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:

$(function(){

    $('div.notice-content').click(toggle);

})

But this is just a plus.

Upvotes: 1

Related Questions