Afficher masquer une div onclick

Bonjour à tous, merci à tous ceux qui prendront le temps et le soin de me répondre.

Je suis confronté à un problème dont je n'ai pas la solution ni même le début d'une piste...

Jai un Template sur lequel l'utilisateur peut cliquer sur deux boutons qui permettent d'afficher en "mode liste" ou en "mode card".
Quand on click "mode card" le deuxième mode passe en hidden et inversement... Tout le monde connait.
j'ai bien une réaction lors du click sur l'un ou l'autre mais le rendu n'est pas celui attendu. C'est à dire :
par défaut le mode card est affiché, lorsque je clique sur le bouton "mode list" je n'ai qu'une fiche du mode liste qui s'affiche et j'ai toujours l'affichage du mode card...
lorsque je reclique sur mode list, la fiche du mode liste disparait.
lorsque je suis en mode list et que je clique pour afficher le mode card, la position des 2 premières fiches s'inverse mais le contenu reste le même.

Voila la partie du code qui appelle la fonction :

Code:

1
2
3
4
5
6
7
8
<div class="selectViewProduct">
					<a href="#" onclick="viewProduct('section1');">
						<i class="fas fa-columns"></i>
					</a>
					<a href="#" onclick="viewProduct('section2');">
						<i class="fas fa-stream"></i>
					</a>
				</div>

la fonction :

Code:

1
2
3
4
5
function viewProduct(div_name) {
  if (document.getElementById(div_name).style.display == "none")
    document.getElementById(div_name).style.display = "block";
  else document.getElementById(div_name).style.display = "none";
}

et le code des 2 div à afficher :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div id="section1" class="flip-card">
	<div class="flip-card-inner">
		<div class="flip-card-front">
			<header>
				<h1>{{ product.productName }}</h1>
				<span>{{ product.productRef }}</span>
				<p class="recipe-metadata">
					<span class="recipe-rating">★★★★<span>☆</span>
					</span>
					<span class="recipe-votes">(12 votes)</span>
				</p>
			</header>
			<main>
 
			</main>
			<footer>
				{% for c in product.productCategories %}
					<em>#{{ c.categoryName }}</em>
				{% endfor %}
 
			</footer>
		</div>
		<div class="flip-card-back">
			<a href="{{path('productShowDetail', {id:product.id, slug: product.slug}) }}">
				<header>
					<h1>{{ product.productName }}</h1>
					<span>{{ product.productRef }}</span>
				</header>
				<main class="description">
					<div class="price">
						€
						<span>{{ product.productPrice | number_format(0, ',', ' ') }}</span>
					</div>
					<h3>BENEFITS</h3>
					<ul>
						<li>{{ product.productDescription }}</li>
						<li>{{ product.productContent }}</li>
					</ul>
				</main>
			</a>
			<footer>
 
			</footer>
		</div>
	</div>
</div>
 
<div id="section2" class="big" style="display:none;">
	<div class="recipe">
		<a href="{{path('productShowDetail', {id:product.id, slug: product.slug}) }}">
 
			<div class="pizza-box">
 
			</div>
			<div class="recipe-content">
				<p class="recipe-tags">
					{% for c in product.productCategories %}
						<span class="recipe-tag">#{{ c.categoryName }}</span>
					{% endfor %}
				</p>
 
				<h1 class="recipe-title">
					<a href="#">{{ product.productName }}</a>
				</h1>
			</div>
		</a>
	</div>
</div>

J'ose espérer que c'est suffisamment clair et que vous pourrez m'orienter vers la bonne solution.
Merci