active functionality in lwc when i clicked it should be as per css behaviour another click outside remove css behaviour

Question

hi i am new to lwc i want to remove or add css onclick , for simply explain now i have selected resource then its open and have green color if i select collaboration now it should be green collaboration and remove green color from resource another case if i click outside this pic then green color should be removed anyhelp

For now, I am using this code-every onclick call for function and give all others none to css variable used in html page

openpartner(event){
        var e=event.target;
        this.greenclr7='greencolor7';
        this.greenclr6='';
        this.greenclr4='';
        this.greenclr5='';
        this.greenclr3='';
        this.greenclr2='';
        this.greenclr1='';
        this.partButton= !this.partButton;
        this.partCss= this.partButton ? 'addpart' : 'removepart';
        if(e.className==='signclass'){
            e.className = 'xyz';
        }
       else
       {
            e.className='signclass';
       }
    }

Answer 1

You can e. g. hold a reference to the current selected Item and add a click listener to update the class list of the elements:

Example:

Markup:

<template>
    <div class="app slds-p-around_x-large">
        <template for:each={features} for:item="feature">
            <div key={feature.id} onclick={highlight}>{feature.label}</div>
        </template>
    </div>
    <div style="height: 100px; border: 1px solid gray">Outside the Item Container></div>
    <span>Some other Area</span>
</template>

Class:

import { LightningElement } from 'lwc';
export default class App extends LightningElement {

    selected;
    listenerAttached = false;

    get features() {
        return [
            {
                label: 'Item 1',
                id: '1',
            },
            {
                label: 'Item 2',
                id: '2',
            },
            {
                label: 'Item 3',
                id: '3',
            },
            {
                label: 'Item 4',
                id: '4',
            },
            {
                label: 'Item 5',
                id: '5',
            },
        ];
    }

    highlight(evt) {
        evt.stopPropagation();
        evt.target.classList.toggle('highlight');
        this.unselect(evt.target);
        this.selected = evt.target;
    }

    unselect(target){
        if (this.selected && this.selected !== target) {
            this.selected.classList.remove('highlight');
            this.selected = null;
        }
    }

    renderedCallback() {
        if (!this.listenerAttached) {
            this.template.addEventListener('click', this.unselect.bind(this));
        }
    }
}

In Action: https://developer.salesforce.com/docs/component-library/tools/playground/vH5FPXs0C/4/edit

Adding the Event Listener on document Level should also work - but depending on your Use Case you should still only apply it on component level due to performance and general Platform / Framework Principle for Separation of Concerns