jQueryアコーディオンでプラスマイナスの作り方

jQueryでプラスマイナスでコンテンツを開け閉めすることがやりたいです。
理想として下記サイトのような形でコンテンツを追加するということです。
開閉するアコーディオンメニューに使える！＋から－へ、＋から×へアイコンを切り替えるアニメーション

今回中身をflexで横ならびにしているためコピペで動くようにはいかなくなり四苦八苦しております。
div.None
p.switch

まだやりかけでまとまってもいないのですが、悩み疲れたため、一旦投稿させていただきます。
随時修正していこうと思っています。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="en" >
3
4<head>
5  <meta charset="UTF-8">
6  <title>A Pen by  kingkazuma7</title>
7  <!-- <link rel="stylesheet" href="css/style.css"> -->
8  <style>
9    .contentWrap {
10    display: flex;
11    width: 960px;
12}
13.contentWrap .acoPic {
14    margin-right: 30px;    
15}
16.contentWrap .acoPic:nth-child(3) {
17    margin-right: 0;
18}
19
20.None {
21    display: none;
22}
23.accordion_icon {
24     width: 960px;
25     position: relative;
26    width: 66px;
27    height: 66px;
28    background: #232e52;
29    position: absolute;
30    top: 0;
31    right: 0;
32}
33/* アコーディオン± */
34.accordion_icon,
35.accordion_icon span {
36    display: inline-block;
37    transition: all .4s;
38    box-sizing: border-box;
39}
40.accordion_icon {
41    position: relative;
42    width: 66px;
43    height: 66px;
44    background: #232e52;
45    position: absolute;
46    top: 0;
47    right: 0;
48}
49.accordion_icon span {
50    position: absolute;
51    left: 16px;
52    width: 50%;
53    height: 2px;
54    background-color: #fff;
55    border-radius: 4px;
56    -webkit-border-radius: 4px;
57    -ms-border-radius: 4px;
58    -moz-border-radius: 4px;
59    -o-border-radius: 4px;
60}
61.accordion_icon span:nth-of-type(1) {
62    top: 50%;
63    transform: rotate(0deg);
64    -webkit-transform: rotate(0deg);
65    -moz-transform: rotate(0deg);
66    -ms-transform: rotate(0deg);
67    -o-transform: rotate(0deg);
68}
69.accordion_icon span:nth-of-type(2) {
70    top: 35px;
71    transform: rotate(90deg);
72    -webkit-transform: rotate(90deg);
73    -moz-transform: rotate(90deg);
74    -ms-transform: rotate(90deg);
75    -o-transform: rotate(90deg);
76}
77/*＋、－切り替え*/
78.accordion_icon.active span:nth-of-type(1) {
79    display:none;
80}
81.accordion_icon.active span:nth-of-type(2) {
82    top: 35px;
83    transform: rotate(180deg);
84    -webkit-transform: rotate(180deg);
85    -moz-transform: rotate(180deg);
86    -ms-transform: rotate(180deg);
87    -o-transform: rotate(180deg);
88}
89
90.acoTitle {
91  font-size: 18px;
92    padding: 20px 0 20px 30px;
93    background: #EEE;
94    margin-bottom: 5px;
95    position: relative;
96}
97  </style>
98</head>
99
100<body>
101
102  <p class="switch acoTitle">ここを押すとプラスマイナス
103    <span class="accordion_icon active"><span></span><span></span></span></p>
104  <div class="None">
105  <div class="contentWrap">
106    <div class="acoWrap">
107      <div class="acoPic">
108        <img src="https://placehold.jp/300x300.png" alt="">
109      </div>
110    </div>
111    <div class="acoWrap">
112      <div class="acoPic">
113        <img src="https://placehold.jp/300x300.png" alt="">
114      </div>
115    </div>
116    <div class="acoWrap">
117      <div class="acoPic">
118        <img src="https://placehold.jp/300x300.png" alt="">
119      </div>
120    </div>
121  </div><!--contentWrap-->
122  </div><!--None-->
123  
124  <script>
125    $(function(){
126 $(".switch").on("click", function() {
127   $(this).next().slideToggle();
128   // activeが存在する場合
129   if ($(this).children(".accordion_icon").hasClass('active')) {
130   // activeを削除
131     $(this).children(".accordion_icon").removeclass('active');
132   }
133   else {
134   // activeを追加
135   $(this).children(".accordion_icon").addClass('active');
136   }
137 }); //switch終わり
138});
139  </script>
140</body>
141
142</html>
143